Анимационная всплывающая подсказка CSS3 + 4 варианта! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSАнимационная всплывающая подсказка CSS3 + 4 варианта!
Дата: 12.05.2013 в 23:21 | Просмотров: 4229

Анимационная всплывающая подсказка CSS3 + 4 варианта!

всплывающая подсказка css
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы узнаем, как создается простая всплывающая подсказка css. Но у нас она будет не совсем простая, а с эффектом анимации. При создании подсказок, мы будем использовать псевдо-классы CSS3 :before и :after.

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

Обратите внимание, что это будет работать только в браузерах, которые поддерживают псевдо-элементы и CSS3 transitions.

Основа HTML

Как уже было сказано выше, мы имеем список ссылок, в частности маркированный список, следующего вида:

Названия кнопок или сами кнопки, могут быть другие, например можно добавить кнопку “ВК” или “Одноклассники” (если мы говорим о социальных кнопках).

Стилизация CSS

Элементы списка li позиционированы с помощью float, что позволяет выстроить их не вертикально, а горизонтально. Сами ссылки, анкоры, имеют следующие стили:

Так как мы для фона используем CSS спрайт, прописываем позицию фонового изображения для каждой ссылки элемента списка:

Теги span мы используем для вывода всплывающих подсказок, которые по умолчанию мы прячем, устанавливая их начальную прозрачность на 100%. Красивый эффект появления подсказки, будет поднимать её выше ссылки или кнопки, поэтому мы задаем нижний отступ 100px:

Так как мы будем делать подсказки видимыми только при наведении курсора мыши на ссылку (а span также засчитывается как часть ссылки), подсказка также появится при наведении курсора мыши на область над ссылкой (просто прозрачность 100%, делает его невидимым).

Для самых маленьких указателей, мы будем стилизовать псевдо-элементы :before и :after. Мы будем оформлять их таким образом, чтобы создать треугольник с помощью прозрачных левой и правой границ. Псевдо-элемент :before будет служить в качестве тени для :after, поэтому мы дадим ему черное значение RGBA с низкой прозрачностью:

Значение при наведении курсора мыши, для элемента span:

И вуаля! Аннимированные подсказки на CSS3 готовы! Во втором примере, вы можете увидеть альтернативный стиль эффекта всплывающей подсказки (в виде круга), который всплывает от ссылки. В третьем примере подсказки вращаются. И в четвертом другой красивый эффект.

Вот что мы имеем:

всплывающая подсказка CSS3

Анимационная всплывающая подсказка CSS3 - 2

Анимационная всплывающая подсказка CSS3 - 3

Надеюсь, этот небольшой эффект Вам понравился и оказался полезен!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


Добавить комментарий