Автор

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

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

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


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

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.


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

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


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

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close