Реализуем подсказки на чистом css

Приветствую вас, веб-мастера и веб-разработчики. Недавно я решил написать статью, в которой поделиться с вами одним из вариантов реализации пояснений при наведении на изображения или другие элементы на веб-странице.

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

Я решил описать метод, который реализовывается на чистом css с помощью псевдоэлементов и data-атрибутов. Он очень легко в реализации. Впрочем, кому интересно, переходите и читайте статью на моем сайте. Вот ссылка.

		Это интересно 0	Как всё будет выглядеть в блоге: Реализуем подсказки на чистом css Приветствую вас, веб-мастера и веб-разработчики Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/sozdat-svoj-sajt-mechta-kazhdogo-chelovekakotoryij-hotya-byi-2-3-raza-zahodil-v-internet/11255652/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Реализуем подсказки на чистом css </a> <div class="insert-intro" style="font-family:trebuchet MS;">Приветствую вас, веб-мастера и веб-разработчики </div> </div> Реализуем подсказки на чистом css <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/sozdat-svoj-sajt-mechta-kazhdogo-chelovekakotoryij-hotya-byi-2-3-raza-zahodil-v-internet/11255652/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Реализуем подсказки на чистом css</a> <div style="font-family:trebuchet MS;">Приветствую вас, веб-мастера и веб-разработчики </div> </div>

mixa430899

18.02.2016

В избранное Пожаловаться Просмотров: 1040

Комментарии ⁰

Создать свой сайт 963

Активные участники:

Последние откомментированные темы:

Реализуем подсказки на чистом css

Комментарии временно отключены

Открытая группа
19569 участников