17.07.14, 13:36
0 комментарий
  Уроки

Создаём анимированные социальные иконки используя только CSS3

Эта статья расскажет вам, как простой это, создать анимированные социальные иконки используя только CSS3.

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

Давайте начнем со структуры HTML.
Каждое изображение иконки - ссылка с двумя изображениями внутри. Первое изображение - черно-белая. Вторая - цветная.
Так, если Вы соберетесь использовать свои собственные изображения, то Вы должны будете сделать две версии (черно-белая версия и окрасить версию). Чтобы сделать это, Вы можете использовать любое программное обеспечение для обработки изображений (графический редактор).
Также у всех изображений для всех символов должны быть одинаковые размеры.

Вот пример HTML кода для пяти социальных иконок:

<a href="#"><img src="bw-yahoo.png" alt=""><img src="yahoo.png" alt=""></a>
<a href="#"><img src="bw-wordpress.png" alt=""><img src="wordpress.png" alt=""></a>
<a href="#"><img src="bw-vimeo.png" alt=""><img src="vimeo.png" alt=""></a>
<a href="#"><img src="bw-twitter.png" alt=""><img src="twitter.png" alt=""></a>
<a href="#"><img src="bw-tumblr.png" alt=""><img src="tumblr.png" alt=""></a>


По умолчанию, в каждой связи, второе изображение скрыто, чтобы показать только первое изображение, которое является фактически черно-белой версией символа.
Когда пользователь наводит курсор на символ, первое изображение исчезает, и второе появляется. Это достигнуто, при помощи CSS margin-top для первого изображения.
Этим переключается между двумя изображениями, но использование его вместе с CSS transition делает хорошую мультипликацию.

CSS:

a {
  overflow: hidden;
  height: 64px;
  -webkit-transition: all linear 200ms;
  -moz-transition: all linear 200ms;
  -o-transition: all linear 200ms;
  transition: all linear 200ms;
}

a img {
  border: none;
  display: block;
}

a img:first-child {
  margin-top: 0;
  -webkit-transition: all linear 200ms;
  -moz-transition: all linear 200ms;
  -o-transition: all linear 200ms;
  transition: all linear 200ms;
}

a:hover img:first-child {
  margin-top: -64px;
}

a:hover {
  -webkit-box-shadow: 0 0 6px #000000;
  -moz-box-shadow: 0 0 6px #000000;
  box-shadow: 0 0 6px #000000;
}


Вы можете изменять только два параметра по своему усмотрению:

height: 64px; и margin-top: -64px;

Вы должны изменить эти два значения в случае, если Вы собираетесь использовать другие размеры изображения социальных иконок, чем используемые в этой статье (64x64 pixels).



Для особо ленивых, залил готовые иконки в архив!

СКАЧАТЬ

Вес файла
113.67 Kb

Напишите своё мнение