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

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


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

 

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

Вот и все. Готово!


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеHTML5

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

Как часто вы замечали так называемые "вееры" с выбором цвета, или прочей информацией с магазинах. Это достаточно удобный подход, для экономии места, при этом предоставляется возможность хранить множество информации в достаточно малом объеме места. В данном уроке мы рассмотрим пример создания такой книжки образцов для сайта с помощью jquery и css3, в которой панели воспринимают нажатия кнопки мыши, после чего происходит открытие нужной страницы. В демонстрации приводится несколько примеров организации книги.


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

На некоторых сайтах можно встретить боковые меню, принцип его реализации можно найти в мобильной версии вконтакте и популярно сайта 3dnews. Это весьма удобно, ведь даже на моей мобильной версии IE это смотрится достаточно привлекательно, благодаря плавной анимации и простоте решения. В данном уроке мы рассмотрим как можно создать такое боковое меню. Мы рассмотрим несколько типов бокового меню: меню слева, права и добавим вариант просмотра с контентом, что позволит выводить страницу подобно фреймам.


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

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


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

В этой статье подготовлены 8 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог