Автор

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

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

Если вы ищете, как создать активную диаграмму (или схемы) с информацией - эта новая статья для вас. Я просматривал в Интернете, и нашел одно хорошее и серьезное решение, - Highcharts библиотека. Это чистая javascript библиотека, которая предлагает интерактивные и интуитивно понятные графики. Эта библиотека поддерживает различные возможные графики: площадь, линии, сплайн, areaspline, пирог, колонны и другие. Я думаю, что это лучший способ, чтобы получить информацию для зрителей. Сегодня в демо я подготовил несколько примеров с разными графиками.


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

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


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

Отображение информации на странице в виде jQuery вкладок.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close