Социальные сети широко распространились, сейчас уже мало кто может себя представить без фейсбука или контакта, а кто может представить, то таким людям можно только позавидовать. Дело в том, что социализация своего ресурса проходит вам только на руку, ведь такие места, как я описал выше, это массовое сборище людей, которые готовы, пускай не все, но почитать вашу ссылочку. По этому, как не крути, но социальные кнопки просто необходимы для любого интернет ресурса.
В данном уроке мы рассмотрим простой пример создания и оформления социальных закладок, реализованы они будут только с помощью CSS3 и HTML5. Да вы все правильно прочитали, никаких изображений, и сторонних картинок, все помещено в достаточно простой код, что позволит экономить время загрузки. И так, приступим.
Шаг 1. HTML
Для начала нам необходимо создать разметку, в которой мы создадим небольшой список с нашими социальными закладками.
<div class="menu">
<ul class="primary-menu">
<li class="facebook"><a class="social-item" href="#">f</a><span class="social-span">Читать новости в Facebook</span></li>
<li class="twitter"><a class="social-item" href="#">t</a><span class="social-span">Следить в Twitter</span></li>
<li class="flickr"><a class="social-item" href="#">c</a><span class="social-span">Добавить в Flickr</span></li>
<li class="rss"><a class="social-item" href="#">a</a><span class="social-span">Подписаться на RSS</span></li>
<li class="mail"><a class="social-item" href="#">k</a><span class="social-span">Опубликовать в newsletter</span></li>
</ul>
</div>
С разметкой все понятно, у нас есть классы, которые содержат информацию о вызове определенной социальной кнопки, и так, идем далее.
Шаг 2. CSS
Теперь нам необходимо визуально оформить закладки, кроме этого добавить элементы вращения закладок, на 360 градусов. Кроме этого добавим некоторые фиксы для полной поддержки различными браузерами в том числе и старого ослика.
#content .menu .primary-menu li a:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-khtml-transform: rotate(360deg);
transform: rotate(360deg);
behavior: url(pie/PIE.htc);
}
#content .menu .primary-menu li span.social-span {
font-family:Arial;
font-size:11px;
position:absolute;
width:100px;
top:45px;
left:-45%;
background:#ffffff;
padding:5px;
border:1px solid #B8B8B8;
opacity:0;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
-ms-transition:opacity 1s ease-in-out;
-khtml-transition:opacity: 1s ease-in-out;
transition:opacity 1s ease-in-out;
behavior: url(pie/PIE.htc); /* CSS3 Fix для Internet Explorer */
}
Обратите внимание, что код приведен частично, полную реализацию можно просмотреть в исходниках.