Создание ссылок со значками социальных сетей с использованием только CSS

3 октября 2016 | Опубликовано в css | 2 Комментариев »

Из этого урока вы узнаете, как создать ссылки со значками социальных сетей, используя CSS и простой HTML. С помощью современных технологий, без использования изображений или JavaScript сделаем из ненумерованного списка текстовых ссылок набор значков. Это решение поддерживается всем современными версиями браузеров и даже такими старыми, как Internet Explorer версии 8.

Демонстрация работы – Посмотреть исходный код

Значки социальных сетей

На изображении ниже показано, как будет выглядеть результат:

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

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

Код примера

Код HTML состоит из ненумерованного списка ссылок разных социальных сетей и сервисов:

<ul>
   <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
   <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
   <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
   <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
   <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
   <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
   <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
   <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
   <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
   <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
</ul>

Применим общие стили для элементов, из которых состоит список:

ul {
   list-style:none;
   padding:0;
   margin:0;
   overflow:hidden;
   font:0.875em/1 Arial, sans-serif;
}

ul li {
   float:left;
   width:66px;
   height:66px;
   margin:20px 20px 0 0;
}

ul li a {
   display:block;
   width:64px;
   height:64px;
   overflow:hidden;
   border:1px solid transparent;
   line-height:64px;
   text-decoration:none;
   text-shadow:0 -1px 0 rgba(0,0,0,0.5);
   border-radius:5px;
}
ul li a:hover,
ul li a:focus,
ul li a:active {
   opacity:0.8;
   border-color:#000;
}

У каждого значка есть свои стили. Вот код CSS, который создает значок социальной сети Facebook:

.facebook a {
    position:relative;
    border-color:#3c5a98;
    text-transform:lowercase;
    text-indent:34px;
    letter-spacing:10px;
    font-weight:bold;
    font-size:64px;
    line-height:66px;
    color:#fff;
    background:#3c5a98;
    box-shadow:0 0 4px rgba(0,0,0,0.4);
}

Заключение

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

Автор урока Nicolas Gallagher

Перевод — Дежурка

Смотрите также:

Опубликовано в css, октября 3, 2016
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Создание ссылок со значками социальных сетей с использованием только CSS

Значки социальных сетей

Код примера

Заключение

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые