Социальные закладки для сайта на HTML5

HTML5 17.04.2013

Социальные сети широко распространились, сейчас уже мало кто может себя представить без фейсбука или контакта, а кто может представить, то таким людям можно только позавидовать. Дело в том, что социализация своего ресурса проходит вам только на руку, ведь такие места, как я описал выше, это массовое сборище людей, которые готовы, пускай не все, но почитать вашу ссылочку. По этому, как не крути, но социальные кнопки просто необходимы для любого интернет ресурса.

ДЕМО

ИСХОДНИКИ

В данном уроке мы рассмотрим простой пример создания и оформления социальных закладок, реализованы они будут только с помощью 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 */
}

Обратите внимание, что код приведен частично, полную реализацию можно просмотреть в исходниках.