Анимированные подсказки для элементов текста и ссылок с помощью свойств 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; } |
Это еще не все, было бы нелепо оставлять подсказке однотипный внешний вид и цветовую гамму, так что можно немного поработав придать необычные формы и различные цвета нашим подсказкам.
Это подсказка №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 – красный цвет</i></span> <span class="g">зеленый<i class="v1">Подсказка №1 – зеленый цвет</i></span> и <span class="b">синий<i class="v1">Подсказка №1 – синий цвет</i></span></p> <hr /> Это <span>подсказка №2<i class="v2">Подсказка номер два</i></span> Фон может быть <span class="r">красный<i class="v2">Подсказка №2 – красный цвет</i></span> <span class="g">зеленый<i class="v2">Подсказка №2 – зеленый цвет</i></span> и <span class="b">синий<i class="v2">Подсказка №2 – синий цвет</i></span> <hr /> Это <span>подсказка №3<i class="v3">Подсказка номер три</i></span> Фон может быть <span class="r">красный<i class="v3">Подсказка №3 – красный цвет</i></span> <span class="g">зеленый<i class="v3">Подсказка №3– зеленый цвет</i></span> и <span class="b">синий<i class="v3">Подсказка №3 – синий цвет</i></span> <hr /> Это <span>подсказка №4<i class="v4">Подсказка номер четыре</i></span> Фон может быть <span class="r">красный<i class="v4">Подсказка №4 – красный цвет</i></span> <span class="g">зеленый<i class="v4">Подсказка №4 – зеленый цвет</i></span> и <span class="b">синий<i class="v4">Подсказка №4 – синий цвет</i></span> <hr /></div> |
Вот и все, проделав все эти нехитрые манипуляции и телодвижения, те кому это надо, получат замечательные анимированные подсказки на свой сайт или блог.
Ну, а пока — пока!
Классные подсказки))) Как раз то, что нужно.
Доброго времени суток! Нашел Ваш блог и очень благодарен Вам за те прекрасные решения задач, которые показаны на Вашем сайте. Но увы, вынужден у Вас спросить помощи. Дело в том, что я на сайте делаю карту звездного неба через. Возможно ли сделать так, чтобы при наведении курсора на размеченную область изображения вылезала такая красивая подсказка?
Егор.
Спасибо за отзыв. По вашему вопросу, существуют различные решения. Обратите внимание на реализацию подсказок для различных элементов содержания с помощью css и jQuery.
Я прямо бью по всем направлениям. Как сделать, чтобы анимация шла не сверху вниз, а снизу вверх. Допустим у нас есть начальная точка 0 координат и нам нужно на 50% заполнить картинку. И вот анимация должна идти снизу вверх. как? 8)
Вы меня уже в конец запутаете скоро, я не понял, что всё таки вам нуна, подсказки к ссылкам или всплывающие подписи к картинкам, или много и всё сразу. По поводу подсказок, я вам развернуто ответил в комментах к статье, что у вас получилось или нет, ответа не последовало, и вот новый запрос. Прям безудержная тяга к познаниям ))).
За эффекты переходов(появления), в данном примере отвечает свойство
transition, подсказка скрыта и располагается на 60px вверх от нижнего края ссылки, стало быть она там и появляется при наведении, а затем срабатываетtransition:all 0.3s ease-in-out;и смещает подсказку в низ до нужной позиции. Достаточно изменить значение положения скрытой подсказки на отрицательное, например сделатьbottom:-20px;для.content span iи подсказка будет появляться снизу, и т.д. и т.пАвтору огромный респект!!! Спасибо за полезную статью!
Я самоучка и к сожалению лекций не слушал, тут нашел все что надо, просто и доступно. Не составило труда разобраться с теми же подсказами и темой «Модальные всплывающие окна с помощью CSS3 без Javascript» всем советую очень нужная тема.
С подсказками очень все просто оказалось, и доработав стили под свой дизайн магазина виглядит все очень круто.
Еще раз спс за проделанную работу.