Всплывающие подсказки на HTML и CSS3

Всплывающие окна на HTML и CSS3. Drogin.ru

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

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

К тому же, всплывающие подсказки могут быть незаменимым вариантом в крупном проекте, в котором усложнена навигация по сайту. Именно подсказки помогут решить эту проблему: к примеру, пользователь может навести на фразу или элемент сайта, а ему будет выведена краткое её обозначение. Удобно, не правда ли?

Я представляю вам очень удобный и функциональный пример, который реализован только на чистом HTML и CSS3, что несомненно является большим плюсом и гарантирует беспроблемную установку на  проект любой сложности. К тому же, в нём используются современные SVG-иконки, о которых я уже писал в статье про Dashicons в WordPress.

Стоит отметить, что всплывающие подсказки в данном примере являются адаптивными (как и сами примеры), что сокращает ваше потраченное время. Именно поэтому я считаю этот вариант самым оптимальным и удобным для всех нас.

 

Как установить всплывающие подсказки

Как я уже говорил — установка не составит труда, так как никаких «танцев с бубном» здесь не будет.
ПРИМЕР СКАЧАТЬ

 

Давайте рассмотрим все тонкости установки всплывающих подсказок на примере «Растянутая». Для начала разберемся с HTML-документом, а именно с блоком <head>:

Строка 2 — уже привычный нам мета-тег для корректного отображения на Iphone. Если не знаешь что это — читай мою статью про медиа-запросы.

Строка 3-4 — подключаем необходимые стили. demo необходим для нашего демо.

Строка 5 — подключаем файл стилей для шрифта наших примеров. Точнее он необходим для корректного отображения наших SVG-иконок.

Строка 6 — подключаем таблицу стилей конкретно к нашему примеру («Растянутая»).

Собственно, всё что нам необходимо — мы подключили. Остаётся дело за малым — разобраться со структурой нашего <body>:

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

Не стоит удалять какой-либо из классов в примере, так как это приведёт к неминуемой ошибки. Если вам необходимо как либо изменить стиль любого из элементов, не прибегая к редактированию подключенных нами ранее библиотек — следует дописать свой класс или идентификатор. Как вы уже заметили, структура подсказки незамысловатая — всё реализована с помощью тегов списка ul и li. Не нужно изменять её, так как ни к чему хорошему это не приведёт.

Единственное, что следует редактировать:

Данный фрагмент кода я изъял из нашего списка <li>. Именно данный фрагмент отвечает за вывод текста нашей подсказки. Вместо «Автобус» можно написать то, что вам необходимо — и готово! Аналогично изменяем и элементы списка <li> — вот вам и готовая качественная всплывающая подсказка без единого скрипта.

 

Вывод

Таким образом, мы получили отличный вариант всплывающих подсказок, реализованных только на HTML и CSS3. Хотелось бы отметить, что мы рассмотрели лишь 1 вариант оформления подсказок, а в демо их целых 9! Ассортимент самых разных подсказок придет по вкусу каждому веб-мастеру и не останется без внимания ваших пользователей.

Процесс установки и редактирования всплывающей подсказки не займет более 10 минут, но взамен мы получаем:

  • повышение поведенческого фактора;
  • ёмкое оформление;
  • возможность повышения конверсии.

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

 

 


3+
Подписаться на новости

Отправить ответ

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

  Subscribe  
Уведомить о