СЕГОДНЯ МЫ ПОКАЖЕМ ВАМ, КАК СОЗДАВАТЬ ПРОСТЫЕ, АНИМИРОВАННЫЕ ПОДСКАЗКИ С ИСПОЛЬЗОВАНИЕМ CSS ПЕРЕХОДОВ И ПСЕВДО-КЛАССОВ :BEFORE И :AFTER.

Идея заключается в том, чтобы создать маленькие подсказки при наведении курсора на список со ссылками или, как в нашем случае, на иконки социальных сетей.
https://i.imgur.com/FyhtvQq.jpg

Наш список с ссылками будет выглядеть следующим образом:

Код:
<ul class="tt-wrapper">
 <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
 <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
 <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
 <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
 <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
 <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
</ul>

Список элементов будет расположен горизонтально и ссылки будут иметь следующие стили:

Код:
.tt-wrapper li a{
 display: block;
 width: 68px;
 height: 70px;
 margin: 0 2px;
 outline: none;
 background: transparent url(../images/icons.png) no-repeat top left;
 position: relative;
}

Каждая ссылка будет иметь разную позицию фона:

Код:
.tt-wrapper li .tt-gplus{
 background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
 background-position: -68px 0px;
}
.tt-wrapper li .tt-dribbble{
 background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
 background-position: -204px 0px;
}
.tt-wrapper li .tt-linkedin{
 background-position: -272px 0px;
}
.tt-wrapper li .tt-forrst{
 background-position: -340px 0px;
}

Span внутри ссылки будет работать, как наша подсказка, вначале мы будем "прятать" её, установив для неё непрозрачность равную 0. Эффект, которым я хочу поделиться с вами, будет выглядеть как всплывающая подсказка, появляющаяся сверху, поэтому расположим нашу подсказку на 100px выше ссылки:

Код:
.tt-wrapper li a span{
 width: 100px;
 height: auto;
 line-height: 20px;
 padding: 10px;
 left: 50%;
 margin-left: -64px;
 font-family: 'Alegreya SC', Georgia, serif;
 font-weight: 400;
 font-style: italic;
 font-size: 14px;
 color: #719DAB;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 4px solid #fff;
 background: rgba(255,255,255,0.3);
 text-indent: 0px;
 border-radius: 5px;
 position: absolute;
 bottom: 100px;
 opacity: 0;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 transition: all 0.3s ease-in-out;
}

Мы будем делать так, чтобы подсказка появлялась при наведении на ссылку, а span считается как часть ссылки, так как расположен внутри её, поэтому и подсказка также будет появляться при наведении курсора на ссылку.

Для маленького указателя внизу, мы будем использовать псевдо-элементы :before и :after. Он будет ввиде треугольника с небольшой тенью.

Код:
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50%;
 margin-left: -9px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid rgba(0,0,0,0.1);
}

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

Код:
.tt-wrapper li a span:after{
 bottom: -14px;
 margin-left: -10px;
 border-top: 10px solid #fff;
}

При наведении подсказка будет появляться сверху:

Код:
.tt-wrapper li a:hover span{
 opacity: 0.9;
 bottom: 70px;
}

[think=http://www.kolobok.us/smiles/standart/yahoo.gif] 😎  Вуаля! Мы создали очень простую анимированную подсказку! [/think]

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему