Реклама: доставка пиццы заказать пиццу
Главная » Дизайн » уроки » Создаем красивый блок подписки при помощи CSS3

Создаем красивый блок подписки при помощи CSS3

12 июля



Приветствую всех своих читателей. Сегодня предлагаю поговорить о такой замечательной штуке, как CSS3. Весь стандарт мы, конечно же, в рамках одной статьи охватить не сможем. Поэтому затрону лишь всего два свойства transform и transition. Заодно, вы сможете посмотреть все их вкусности на реальном примере.

В CSS3 свойства transform и transition позволяют манипулировать различными объектами без всяких скриптов и флэша, используя только возможности CSS. Применять эти свойства можно к чему угодно: размеру шрифта, фону, изображениям, цвету и так далее. CSS transform позволяет нам масштабировать и поворачивать элементы, совершенно не нарушая их. А свойство transition используется для анимации этих действий. В современных версиях браузеров Safari, Chrome, Opera 9,5+ оба свойства поддерживаются в полном объеме. В Mozilla версий 3,5+ вы не увидите анимации, изображение будет просто сменяться на увеличенное. Хотя в версии 4.0 разработчики и обещали поддержку transition в полном объеме, но так и не реализовали пока. А вот в Safari, Chrome, Opera 9,5+ анимация будет отображаться постепенно.

Чтобы вам было более интересно, давайте рассмотрим эти свойства на примере создания вот такого блока для подписки на новости.

блок подписки

Можете сразу посмотреть демо того, что у нас получится в итоге.

Ну что, заинтересовало? Теперь немного поясню. CSS transform scale используется для увеличения масштабирования изображения. В нашем случае в 1,8 раза. 

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*масштаб увеличения изображения 1.8x для FF 3,5+*/
-webkit-transform:scale(1.8); /*для Safari и Chrome*/
-o-transform:scale(1.8); /*для Opera 9.5+ */
}
Обратите внимание, что мы это свойство прописали внутри селектора img: hover. В результате этого изображение масштабируется, только когда курсор мыши находится над изображением.

CSS transition мы используем для анимации, т.е. для плавного перехода. Указываем тип эффекта, его длительность. В данном примере установлены вот такие параметры:

.bubblewrap li img{
width: 55px; /* ширина иконки.*/
height: 60px; /* высота иконки.*/
border:0;
margin-right: 12px; /*расстояние между иконками*/
-webkit-transition: all 0.5s ease; /*свойства анимации */
-o-transition:-o-transform 0.5s ease; /*свойства анимации для Opera */

Можно составить небольшую сводную таблицу:

таблица свойств

Можете сами поэкспериментировать с разными свойствами. Вот вам исходный код этого блока:

<div class="box">
<ul class="bubblewrap">
        <li><a href="http://prodiz-int.ru"><img src="media/rss.png" title="Подписаться на RSS" /></a></li>
        <li><a href="http://prodiz-int.ru"><img src="media/twitter.png" title="Добавить в Твиттер" /></a></li>
        <li><a href="http://prodiz-int.ru"><img src="media/facebook.png" title="Добавить в Facebook" /></a></li>
        <li><a href="http://prodiz-int.ru"><img src="media/digg.png" title="Добавить в Digg" /></a></li>
        <li><a href="http://prodiz-int.ru"><img src="media/stumbleupon.png" title="Добавить в Stumbleupon" /></a></li>
</ul>
</div>

И стили CSS:

.box {position:absolute; top:100px; left:100px; width:352px; padding:22px;}
 
.bubblewrap{
list-style-type:none;
margin:30;
padding:0;
}
 
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
 
.bubblewrap li img{
width: 55px; /* ширина иконки.*/
height: 60px; /* высота иконки.*/
border:0;
margin-right: 12px; /*расстояние между иконками*/
-webkit-transition: all 0.5s ease; /*свойства анимации */
-o-transition:-o-transform 0.5s ease; /*свойства анимации для Opera */
}
 
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*масштаб увеличения изображения 1.8x для FF 3,5+*/
-webkit-transform:scale(1.8); /*для Safari и Chrome*/
-o-transform:scale(1.8); /*для Opera 9.5+ */
}

И, наверно, не совсем честно с моей стороны будет, если я не поделюсь с вами исходными файлами. ;) Можете скачать архив со всеми исходниками блок подписки. В заключении хотелось бы напомнить, что эти свойства можно использовать много для чего. Не ограничивайтесь лишь этим примером. Удачи!

Без комментариев

Tweet

Не забывайте подписаться на RSS или просто введите свой адрес электронной почты, чтобы получать регулярные обновления на e-mail:

Еще записи из этой рубрики

Ответов 6 на “Создаем красивый блок подписки при помощи CSS3”

  1. ZeroXor 13.07.2011 at 12:02 #

    Симпатичный эффект. Два момента только портят картину. В уменьшенном виде картинки смотрятся “угловатыми” и при движении тень движется и получается не очень реалистично.

    Задумался, как можно это доработать.

    • Борис 13.07.2011 at 12:22 #

      В примере использованы иконки достаточно большого размера. Из-за этого при уменьшении получаются подобные артефакты. Можно взять иконки по-меньше и поэкспериментировать с кратностью увеличения.

  2. levko 19.07.2011 at 00:09 #

    занятно,думаю для кнопок меню это так же может подойти…

    • Борис 19.07.2011 at 09:42 #

      Конечно может. Это всего лишь пример реализации)

  3. Роман Мезенцев 20.07.2011 at 10:37 #

    Интересно попробовать такой эффект в интернет-магазине, на кнопке “Добавить в корзину”.

    • Борис 20.07.2011 at 11:00 #

      А почему бы и нет?) Хорошая задумка

Написать ответ

*