Автор

17 04.2013
Социальные закладки для сайта на 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

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


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

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

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


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

Форма поиска с расширенными параметрами фильтрации и быстрыми ссылками.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close