Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

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

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

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

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

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

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

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

Это подсказка №1Подсказка номер один Фон может быть красныйПодсказка №1 – красный цвет зеленыйПодсказка №1 – зеленый цвет и синийПодсказка №1 – синий цвет


Это подсказка №2Подсказка номер два Фон может быть красныйПодсказка №2 – красный цвет зеленыйПодсказка №2 – зеленый цвет и синийПодсказка №2 – синий цвет


Это подсказка №3Подсказка номер три Фон может быть красныйПодсказка №3 – красный цвет зеленыйПодсказка №3– зеленый цвет и синийПодсказка №3 – синий цвет


Это подсказка №4Подсказка номер четыре Фон может быть красныйПодсказка №4 – красный цвет зеленыйПодсказка №4 – зеленый цвет и синийПодсказка №4 – синий цвет




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

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

Всего комментариев: 7

  • Ваня: 6 октября, 2012 в 18:13

    Классные подсказки))) Как раз то, что нужно.

    Ответить
  • Егор: 23 октября, 2013 в 19:50

    Доброго времени суток! Нашел Ваш блог и очень благодарен Вам за те прекрасные решения задач, которые показаны на Вашем сайте. Но увы, вынужден у Вас спросить помощи. Дело в том, что я на сайте делаю карту звездного неба через. Возможно ли сделать так, чтобы при наведении курсора на размеченную область изображения вылезала такая красивая подсказка?

    Ответить
    • driver: 26 октября, 2013 в 20:03

      Егор.
      Спасибо за отзыв. По вашему вопросу, существуют различные решения. Обратите внимание на реализацию подсказок для различных элементов содержания с помощью css и jQuery.

      Ответить
  • NeedHate: 12 февраля, 2014 в 19:06

    Я прямо бью по всем направлениям. Как сделать, чтобы анимация шла не сверху вниз, а снизу вверх. Допустим у нас есть начальная точка 0 координат и нам нужно на 50% заполнить картинку. И вот анимация должна идти снизу вверх. как? 8)

    Ответить
    • driver: 12 февраля, 2014 в 19:54

      Вы меня уже в конец запутаете скоро, я не понял, что всё таки вам нуна, подсказки к ссылкам или всплывающие подписи к картинкам, или много и всё сразу. По поводу подсказок, я вам развернуто ответил в комментах к статье, что у вас получилось или нет, ответа не последовало, и вот новый запрос. Прям безудержная тяга к познаниям ))).
      За эффекты переходов(появления), в данном примере отвечает свойство transition, подсказка скрыта и располагается на 60px вверх от нижнего края ссылки, стало быть она там и появляется при наведении, а затем срабатывает transition:all 0.3s ease-in-out; и смещает подсказку в низ до нужной позиции. Достаточно изменить значение положения скрытой подсказки на отрицательное, например сделать bottom:-20px; для .content span i и подсказка будет появляться снизу, и т.д. и т.п

      Ответить
  • Елена: 3 августа, 2015 в 07:04

    Автору огромный респект!!! Спасибо за полезную статью!

    Ответить
  • Роман: 12 февраля, 2016 в 14:54

    Я самоучка и к сожалению лекций не слушал, тут нашел все что надо, просто и доступно. Не составило труда разобраться с теми же подсказами и темой «Модальные всплывающие окна с помощью CSS3 без Javascript» всем советую очень нужная тема.
    С подсказками очень все просто оказалось, и доработав стили под свой дизайн магазина виглядит все очень круто.
    Еще раз спс за проделанную работу.

    Ответить

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

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>