РЕКЛАМА

  • Подробный видеокурс по Python

    Подробный видеокурс по Python

    Получи видеокурс по Python с упражнениями сейчас

    ПОДРОБНЕЕ

     

  • Как создаются сложные проекты на Java?

    Как создаются сложные проекты на Java?

    Узнай это в бесплатных видеоуроках

    ПОДРОБНЕЕ

     

  • Как открыть свою Web-студию?

    Как открыть свою Web-студию?

    Пошаговый Видеокурс с заданиями от владельца Web-студии

    ПОДРОБНЕЕ

     

  • Создание движка для сайта

    Создание движка для сайта

    Научись создавать профессиональные движки на PHP и MySQL!

    ПОДРОБНЕЕ

     

НОВИНКА+

Конструктор сайтов для бизнеса

Конструктор сайтов для бизнеса

Создайте сайт за 5 минут и начинайте продавать в интренете.

ПОДРОБНЕЕ

 

Английский Язык для Среднего Уровня

Английский Язык для Среднего Уровня

Научись говорить, понимать английский на слух. От профессиональных преподавателей на основе легендарных фильмов и песен.

ПОДРОБНЕЕ

 

Узнавайте о новостях по теме программирования

Симпатичные подсказки на CSS3

Дата: 13.01.2014
Автор: Сергей
Источник: bulatlab.ru

И снова – здравствуйте!

 

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

 

Несомненным плюсом рассматриваемых закладок является то обстоятельство, что для их создания не требуются никакие дополнительные скрипты и библиотеки – всё сделано с помощью стандартных средств CSS3.

 

Итак, как всегда, сначала создаём html-документ со следующей разметкой:

 

Подсказка CSS3
	При наведении курсора на 
	ЭТУ	
	lorem
	Это всплывающая подсказка в серых тонах 
	ссылку появится всплывающая подсказка в серых тонах.
При наведении курсора на ЭТУЭто всплывающая подсказка в желтых тонах ссылку появится всплывающая подсказка в желтых тонах.
При наведении курсора на ЭТУ Это всплывающая подсказка в тёмно-серых тонах ссылку появится всплывающая подсказка в тёмно-серых тонах.
При наведении курсора на ЭТУЭто всплывающая подсказка в голубых тонах ссылку появится всплывающая подсказка в голубых тонах.
При наведении курсора на ЭТУЭто всплывающая подсказка в розовых тонах ссылку появится всплывающая подсказка в розовых тонах.

 

В html-коде ничего сложного нет – это по сути обычные ссылки, с включенными в них элементами span, которые по существу и являются непосредственно самими подсказками. Кроме того, для примера, что помимо текста в подсказке может содержаться и графическая информация, в первую подсказку включен элемент img.

 

Далее определяем стили всех элементов в коде ниже, который помещаем либо в раздел head, либо присоединяем отдельным файлом.  В данном коде также ничего супер-сложного и особенного нет.  Только бы хотелось обратить внимание на стрелочки к подсказкам. Эти стрелочки реализованы с помощью пвсевдоклассов  - .tooltip span:before  и .tooltip span:after.

 

 

 

Вот и всё! :) До встречи в следующих статьях. Благодарю, что их читаете…

 

 

 

 

Оценить эту статью:   
Просмотров: 969
Комментариев: 0
Оценка: (0)


Добавить комментарий
Поделитесь этой страничкой в социальных сетях