Как создать анимированный tooltip при помощи CSS3

Главная

Статьи

Верстка сайтов

01.02.2012 12:02

Как создать анимированный tooltip при помощи CSS3

Сегодня мы покажем вам, как создавать простые, анимированные подсказки с использованием CSS переходов и псевдо-классов :before и :after.

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

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

<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;

}

Вуаля! Мы создали очень простую анимированную подсказку! Во втором примере, вы можете увидеть альтернативный вариант для подсказки ввиде круга, в третьем примере всплывающие подсказки поворачиваются. В четвертом примере показан еще один симпатичный эффект.

Красивые социальные иконки в демо от Emir Ayouni (growcase.com).

Надеюсь, вам понравились эти эффекты и вы найдете их полезными для себя!

Обратите внимание, что эти примеры будут работать только в браузерах, которые поддерживают псевдо-элементы и CSS переходы.