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

июля 12, 2014  
Категория Уроки

Сегодня предлагаю поговорить о такой замечательной штуке, как 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+ */
}

В заключении хотелось бы напомнить, что эти свойства можно использовать много для чего. Не ограничивайтесь лишь этим примером.

eTXT

Комментарии закрыты.