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

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

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

    Ответить
    • driver:

      Егор.

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

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

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

    Ответить
    • driver:

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

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

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

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

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

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

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

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

    Ответить
  6. Классный сайт!

    Спасибо!

    Стараюсь не использовать javascript, ввиду того, что он плохо индексируется поисковиками. Не люблю css фрэймворки. А здесь много решений на css3.

    Практически все модные навороты можно реализовать каскадными стилями.

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

Отправляя к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 комментариев к этой записи »