Иконки социальных сетей на CSS

Иконки социальных сетей на CSS

В этой статье я расскажу о эксперименте по созданию иконок социальных сетей на CSS. Они созданы не на "чистом CSS3" или "HTML5 canvas". При создании этих иконок используется традиционная техника с фоновым изображением. Цель эксперимента состоит в обеспечении кроссбраузерности, создании последовательного и универсального CSS-кода, который может быть применен в любом дизайне, приложении или теме. В принципе, это набор стилей, который позволяет отображать различные иконки, комбинируя CSS-классы.

Демонстрация

Реализация

Чтобы использовать эти CSS-иконки на вашем сайте, скачайте архив, который включает файл social-buttons.css:

<link rel="stylesheet" href="social-buttons.css">

Вариант A: Вам нужно добавить класс .sb (.sb - social button) и класс иконки (например, Twitter, Facebook, RSS и т.д.) к тегу <a>. Используйте этот вариант, если вы хотите, чтобы каждая кнопка имела свой стиль.

<a href="#" class="sb orange twitter">Twitter</a>
<a href="#" class="sb blue facebook">Facebook</a>

Вариант Б: Класс .sb также используется, но только для тега-оболочки, например, для <p>, <div> или <ul>. Класс для иконки (например, Twitter, Facebook, RSS) необходимо прописать для тэга <a>. Используйте этот вариант, если хотите, чтобы кнопки имели один последовательный стиль.

<p class="sb gradient blue">
 <a href="#" class="twitter">Twitter</a>
 <a href="#" class="facebook">Facebook</a>
</p>

<ul class="sb circle gray text">
 <li><a href="#" class="twitter">Twitter</a></li>
 <li><a href="#" class="facebook">Facebook</a></li>
</ul>

Доступные классы CSS

Ниже приведен список доступных классов. Вы можете назначить столько классов, сколько хотите. Они очень универсальные. Вы можете смешивать и сочетать стили для получения различных результатов. Например, вы можете установить классы "large blue gradient glossy embossed text thick-border" для одной кнопки. Посмотрите демо-примеры.

Размеры

  • default = 34px
  • small = 28px
  • large = 42px

Цвета

  • blue
  • purple
  • red
  • green
  • orange
  • brown
  • black
  • gray
  • light-gray
  • light-blue
  • light-purple
  • pink
  • light-green
  • yellow

Стили

  • min = минимальные стили, без фона и рамки
  • flat = без закругленных уголков и теней
  • circle = круглая кнопка
  • embossed = тиснение
  • pressed = нажатая кнопка
  • thick-border = толстые, строгие границы
  • no-border = без рамки
  • no-shadow = без тени
  • gradient = градиент, применяется при помощи псевдо-класса :after
  • glossy = глянцевый градиент, применяется при помощи псевдо-класса :before
  • text = иконка с текстом

Типы иконок

  • twitter
  • facebook
  • heart
  • linkedin
  • pinterest
  • podcast
  • rss
  • share_this
  • star
  • vimeo

Как добавить свои собственные иконки

Так как социальных сетей слишком много, я включил только некоторые основные классы иконок в демо, чтобы файл стилей не был слишком большим, и сохранил их в файл social-icons.css. Вы можете добавить больше классов иконок с помощью простого кода CSS (не забудьте добавить класс .sb для ссылки <a href="#" class="sb youtube">) :

a.sb.youtube {
 background-image: url(images/youtube.png);
}
a.sb.email {
 background-image: url(images/email.png);
}

Как переопределить размер кнопки и цвет фона

Вы можете изменить размер кнопки и фон, используя следующий код CSS:

a.sb {
 width: 36px;
 height: 36px;

 background-color: #ссс;
}

Как добавить свой градиент

Градиентный фон применяется при помощи псевдо-элемент :before. Вы можете создавать свои градиенты с помощью Ultimate CSS Gradient Generator.

Обратите внимание, что SVG-градиент необходим для Internet Explorer 9, так как он не поддерживает градиент CSS3.

a.sb.gradient.custom:after {
 background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9I
jEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3
BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ
2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ij
AlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI
wJSIgc3RvcC1jb2xvcj0iI2I4YzZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3Rvc
CBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDg4YjciIHN0b3Atb3BhY2l0eT
0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkd
Gg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSI
gLz4KPC9zdmc+);
 background-image: -moz-linear-gradient(top,  #b8c6df 0%, #6d88b7 100%);
 background-image: -webkit-linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);
 background-image: linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);
}

Как создать свой собственный стиль

Вы также можете переопределить стили по умолчанию в social-icons.css и создать свой собственный стиль. Следующий класс custom  переопределяет фоновое изображение.

/* custom icon */
a.sb .custom {
 width: 80px;
 height: 80px;
 
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
}
a.sb.custom:after {
 background-image: url(images/custom-bg.png);

 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
}

/* custom icon blue */
a.sb.custom.blue {
 border-color: #96a8af;
}
a.sb.custom.blue:after {
 background-image: url(images/custom-bg-blue.png);
}
/* custom icon pink */
a.sb.custom.pink {
 border-color: #b0a1aa;
}
a.sb.custom.pink:after {
 background-image: url(images/custom-bg-pink.png);
}

/* custom icon background images */
a.sb.custom.retweet {
 background-image: url(images/custom-icon-retweet.png);
}
a.sb.custom.photo {
 background-image: url(images/custom-icon-photo.png);
}
a.sb.custom.comment {
 background-image: url(images/custom-icon-comment.png);
}

Иконки социальных сетей на CSS

Совместимость с браузерами

Основные стили работают в любом браузере. CSS3-эффекты, таких как: закругленные углы, градиент, глянец, эффекты нажатия и тиснения, будут работать в любом браузере, который поддерживает CSS3, таких как Chrome, Firefox, Safari, Opera и IE9.

Бесплатная лицензия

Иконки 100% бесплатные и могут использоваться для любых целей. Вы можете делиться ими и изменять их.

Перевод статьи с webdesignerwall.com


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

    You have no rights to post comments