Идея с таким способом отображения иконок была взята с сайта Pubwich. Общий дизайн сайта выглядит довольно хорошо, но часть сайта, где расположены социальные иконки, заслужила особого внимания. Когда вы наводите мышкой на иконку, появляется подсказка с именем социалки, а все остальные иконки становятся полупрозрачными.
Немного доработав концепт с помощью CSS3 переходов, мы сделали плавного затемнения и осветления элементов и анимации появления подсказки. Все это получило название «красивый способ отображения социальных иконок на CSS3».
Пример работает со всеми браузерами, поддерживающими -webkit
код (Safari и Chrome), а также с Firefox 4. В статью также включена версия сниппета с использованием jQuery, что нужно для более полной совместимости с различными браузерами. Т.е. вы можете видеть, как работает один и тот же эффект и на CSS и на jQuery.
Хотя код и полученный эффект минимальны, но зато вы получите более профессиональный вид своего сайта. Давайте разберем код, чтобы понять, как это все работает.
HTML
HTML будет очень чистый и простой (впрочем он такой и должен быть).
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="social"> <li class="delicious"> <a href="http://www.delicious.com/"> <strong>Delicious</strong> </a> </li> <li class="digg"> <a href="http://digg.com/"> <strong>Digg</strong> </a> </li> <!-- More services --> </ul> |
Как вы видите, мы используем простой неупорядоченный список (unordered list) с элементами списка (list items), которые содержат ссылки. Со стороны покажется немного странным использовать элементы strong
, для отображения подсказок, вместо стандартных элементов span
, но предпочтение отдано именно strong
.
Теперь коснемся общих классов, как для CSS, так и для jQuery.
CSS
CSS не сложен, основные изменения связаны с отображением элементов в строку и настройкой отображения самих элементов.
1 2 3 4 5 6 7 8 9 10 |
.social { list-style:none; } .social li { display:inline; float:left; } .social li a { display:block; width:48px; height:48px; position:relative; } .social li a strong { position:absolute; left:20px; top:-1px; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } li.delicious { background-image:url("../images/delicious.png"); } li.digg { background-image:url("../images/digg.png"); } |
Примите к сведению, что text-shadow
, rgba
и border-radius
являются свойствами CSS3. Так как у предка элемента strong
стоит свойство position:relative
, значит мы можем использовать на элементе strong
свойство position:absolute
с вполне определенным значениями left
и top
.
А теперь самая интересная часть — анимация CSS3!
CSS3
Вы ожидаете тонны CSS3 кода? Мы огорчим вас, потому что кода будет неприлично мало:
1 2 3 4 5 6 7 8 9 |
.social:hover li { opacity:0.2; } .social li { transition-property: opacity; transition-duration: 500ms; } .social li a strong { opacity:0; transition-property: opacity, top; transition-duration: 300ms; } .social li:hover { opacity:1; } .social li:hover a strong { opacity:1; top:-10px; } |
Мы просто указали конкретные свойства, которые и составляют анимацию. В нашем случае, opacity
(для иконки) и opacity, top
(для подсказки). Мы также указали длительность анимации.
При наведении курсором мыши на эти элементы, мы изменяем значения этих свойств. Как только устанавливается свойство transition-property
, браузер делает всю анимацию за нас! Просто, не правда ли? Как только курсор уходит с элемента, анимация проигрывается в обратную сторону и значения свойств элементов становятся как и прежде.
jQuery
Рассмотрим случай, когда всю работу выполняет jQuery (когда посетитель приходит на сайт с браузером, не поддерживающим CSS3, но с поддержкой JavaScript ). Хотя эффект тот же самый, но, во-первых, требует наличие библиотеки jQuery и, во-вторых, нужно намного больше кода, чтобы его реализовать.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// Hide all the tooltips $("#jquery li").each(function() { $("a strong", this).css("opacity", "0"); }); $("#jquery li").hover(function() { // Mouse over $(this) .stop().fadeTo(500, 1) .siblings().stop().fadeTo(500, 0.2); $("a strong", this) .stop() .animate({ opacity: 1, top: "-10px" }, 300); }, function() { // Mouse out $(this) .stop().fadeTo(500, 1) .siblings().stop().fadeTo(500, 1); $("a strong", this) .stop() .animate({ opacity: 0, top: "-1px" }, 300); }); |
Теперь, почти все посетители смогут увидеть красивые социальные закладки!
Заключение
Такой эффект выглядит не много лучше, чем на сайте Pubwich, хотя и очень мал. Стоит отметить, что в исходниках прописаны и -webkit
и -moz
префиксы, для лучшей поддержки браузеров и немного больше HTML и JavaScript кода.
А что вы думаете на счет такой анимации? Можно ее еще улучшить или сделать более компактной?