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

Анимированные подсказки для элементов текста и ссылок с помощью свойств 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>

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

7 комментариев
  1. Ваня says:

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

    Ответить
  2. Егор says:

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

    Ответить
    • driver says:

      Егор.

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

      Ответить
  3. NeedHate says:

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

    Ответить
    • driver says:

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

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

      Ответить
  4. Елена says:

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

    Ответить
  5. Роман says:

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

    С подсказками очень все просто оказалось, и доработав стили под свой дизайн магазина виглядит все очень круто.

    Еще раз спс за проделанную работу.

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru