Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание ссылок со значками социальных сетей с использованием только 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

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

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




Комментарии

  1. Серёжа
    Thumb up Thumb down +1

    Кто публикует этот олдскул?

    Ребята, вы реально думаете что за 6 лет, люди ничего лучше ЭТОГО не смогли сделать?

    Ответить

Оставить ответ


7 − пять =

Вставить изображение