Блог Андрея Юрченко

Авторский блог с полезными статьями по темам: создание сайта, заработок на сайте, заработок в интернете, работа на дому, работа в интернете, инфобизнес

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

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

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

социальные кнопки, социальные иконки, анимация, html css

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

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

<span>
<a href=»#» data-icon-text=»Yahoo»><img src=»bw-yahoo.png» alt=»"><img src=»yahoo.png» alt=»"></a>
<a href=»#» data-icon-text=»WordPress»><img src=»bw-wordpress.png» alt=»"><img src=»wordpress.png» alt=»"></a>
<a href=»#» data-icon-text=»Vimeo»><img src=»bw-vimeo.png» alt=»"><img src=»vimeo.png» alt=»"></a>
<a href=»#» data-icon-text=»Twitter»><img src=»bw-twitter.png» alt=»"><img src=»twitter.png» alt=»"></a>
<a href=»#» data-icon-text=»Tumblr»><img src=»bw-tumblr.png» alt=»"><img src=»tumblr.png» alt=»"></a>
</span>

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

Все операции появления и исчезновения подсказки сопровождаются гладкой анимацией с использованием CSS свойств перехода.

В HTML - коде выше вам нужно указать ссылки на свои значки и изменить атрибут data-icon-text, который присутствует в ссылке каждого значка. Этот атрибут задает текст для всплывающей подсказки текущего значка и может быть изменен на любой другой текст.

Код CSS:

a img {
display: block;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: none;
}

a {
position: relative;
display: block;
float: left;
padding: 0 5px 5px 0;
text-decoration: none;
}

a:before {
position: absolute;
background-color: rgba(0, 0, 0, 0.65);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color: #FFFFFF;
content: attr(data-icon-text);
display: block;
left: 20%;
opacity: 0;
padding: 2px 5px;
top: 0;
white-space: nowrap;
z-index: 10;
}

a,
a:before {
-webkit-transition: all linear 300ms;
-moz-transition: all linear 300ms;
-o-transition: all linear 300ms;
transition: all linear 300ms;
}

a:hover:before {
opacity: 1;
top: -20%;
}

span:hover a {
opacity: 0.35;
}

span a:hover {
opacity: 1;
}

a img:first-child,
span:hover a img:first-child + img,
span:hover a:hover img:first-child {
display: none;
}

span:hover a img:first-child,
span:hover a:hover img:first-child + img {
display: block;
}

Данный код отвечает за все преобразования. Наглядный пример, как все это выглядит, Вы можете посмотреть по ссылке: ДЕМО>>>

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ