Анимированные подсказки для текста и ссылок с помощью свойств CSS3

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

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

И так, начнем!

Сначала мы рассмотрим возможность вывода подсказок для отдельных отрывков(элементов) текста. Допустим у нас есть некий текст, в котором к какому то слову, или отрывку нужно дать пояснение в виде подсказки.

Для начала весь текст необходимо поместить в контейнер используя блочный элемент тега div присвоив ему class=”content”, отрывок текста с подсказкой поместим между тегами <span> и </span>. Саму подсказку облачим тегом <i></i>, тем самым придадим курсивное начертание текста подсказки, ну и в CSS3 он нам будет служить направляющей для оформления и вывода самой подсказки.

В HTML это будет выглядеть примерно так:

<div class="content">Я не люблю воскресные вечера. 
Время разбитых надежд и <span>утраченных иллюзий
<i>Дождь не может идти вечно</i></span>. Все выходные ждёшь светлого будущего, 
а приходит понедельник.</div>

Шаг второй: CSS

Перейдем непосредственно к стилям наших подсказок через свойства CSS.
Во-первых определим стиль для видимого элемента нашей подсказки:

.content span {
    background:#eee;
    border:1px solid #444;
    cursor:pointer;
    display:inline-block;
    outline:none;
    padding:0 5px;
    position:relative;
    text-decoration:none;
 
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}

А теперь оформим внешний вид и скрытие плавающей области подсказки :

.content span i {
    visibility:hidden;
    border:1px solid #444;
    bottom:60px;
    left:50%;
    margin-left:-110px;
    opacity:0;
    padding:10px;
    position:absolute;
    width:200px;
    z-index:99;
 
    background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-color: #eee;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
 
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.content span:hover i {
    bottom:30px;
    opacity:0.95;
    visibility:visible;
}

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

В HTML все это действо будет выглядеть примерно так:

<div class="demo_content">
<p>Это <span>подсказка №1<i class="v1">Подсказка номер один</i></span>  Фон может быть <span class="r">красный<i class="v1">Подсказка №1 &#8211; красный цвет</i></span>  <span class="g">зеленый<i class="v1">Подсказка №1 &#8211; зеленый цвет</i></span> и <span class="b">синий<i class="v1">Подсказка №1 &#8211; синий цвет</i></span></p>
<hr />
Это <span>подсказка №2<i class="v2">Подсказка номер два</i></span>  Фон может быть <span class="r">красный<i class="v2">Подсказка №2 &#8211; красный цвет</i></span>  <span class="g">зеленый<i class="v2">Подсказка №2 &#8211; зеленый цвет</i></span> и <span class="b">синий<i class="v2">Подсказка №2 &#8211; синий цвет</i></span>
<hr />
Это <span>подсказка №3<i class="v3">Подсказка номер три</i></span>  Фон может быть <span class="r">красный<i class="v3">Подсказка №3 &#8211; красный цвет</i></span>  <span class="g">зеленый<i class="v3">Подсказка №3&#8211; зеленый цвет</i></span> и <span class="b">синий<i class="v3">Подсказка №3 &#8211; синий цвет</i></span>
<hr />
Это <span>подсказка №4<i class="v4">Подсказка номер четыре</i></span>  Фон может  быть <span class="r">красный<i class="v4">Подсказка №4 &#8211; красный цвет</i></span>  <span class="g">зеленый<i class="v4">Подсказка №4 &#8211; зеленый цвет</i></span> и <span class="b">синий<i class="v4">Подсказка №4 &#8211; синий цвет</i></span>
<hr /></div>

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

dbmast.ru