Влад Мержевич
В HTML уже есть глобальный атрибут title , который можно добавить к любому элементу веб-страницы. Наличие этого атрибута добавляет всплывающую подсказку, которая появляется при наведении курсора мыши на элемент. Шрифт текста, размер подсказки и её вид в целом зависит от операционной системы и не может быть изменён с помощью стилей. К тому же многих разработчиков не устраивает, что такая подсказка довольно быстро исчезает. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом. Конечно, самый универсальный способ заключается , но в некоторых случаях вполне достаточно обойтись и одним CSS.
В качестве примера я выбрал фотографии, при наведении на них курсора мыши показывается название фотографии. Сам вывод текста будем делать при помощи свойства content и брать значение текста из какого-либо атрибута через attr() . К сожалению, content не будет работать желаемым образом в сочетании с img , поэтому фотографии вставляются в элемент
Пример 1. Код HTML
HTML5 IE Cr Op Sa Fx
Переходим к стилю нашей подсказки. Вначале надо сделать, чтобы она вообще появлялась. Для этого воспользуемся псевдоэлементом ::after , к которому добавляем content: attr(data-title) .
Photo::after { content: attr(data-title); }
Получится, что после содержимого элемента с классом photo будет выводиться текст из атрибута data-title , что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover .
Photo:hover::after { content: attr(data-title); }
Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).
Пример 2. Стиль подсказки
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки
Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).
Пример 3. Вывод подсказки внизу фотографии
HTML5 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Вид всплывающей подсказки
К сожалению, свойство transition , с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after . Впрочем, если заменить этот псевдоэлемент на :after , то можно получить более-менее работающий вариант.
или какие HTML элементы могут иметь всплывающие подсказки
Глава содержит примеры всплывающих подсказок из области Гипертекстовой разметки.
В меню слева вы найдете современные и очень подробные уроки по HTML.
Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.
В данной главе мы рассмотрим
Прежде, чем приступить к HTML подсказкам , предлагаю прочитать информацию.
Это может быть интересно.
Основные тенденции раннего интернета
Начиная с 1997 года, вслед за появлением первых браузеров, часть потребителей активно специализируются в различных областях интернета , как и в сфере информационных технологий, и поддержке компьютерной техники. Многие пользователи становятся веб-дизайнерами, начинают создавать личные и корпоративные сайты, участвуют в сооружении локальных компьютерных сетей. Таким образом они самообразовываются. Подобное положение вещей сохранилось до наших дней. Сегодня очень модно и удобно получать знания посредством Всемирной паутины. Сегодня и особенно тогда, в середине 90-х годов прошлого века, бывшие социалистические страны нуждаются в специалистах по программированию. Есть спрос - будет и предложение. Программисты обучаются в массовом порядке - кто в университетах, кто дома перед экраном компьютера. В эти сказочные времена большую популярность обретают форумы по программированию, где молодые и не очень специалисты обмениваются своим опытом и идеями.
Всплывающая подсказка для HTML ссылки
Здесь все почти тоже самое: атрибут title="" определяет всплывающую HTML подсказку .
alt="" изображения определяет альтернативный текст, который будет показан на странице, если не отобразится картинка.
Не стоит путать HTML подсказку и альтернативный текст, так как это совершенно различные вещи.
Всплывающая HTML подсказка для текста
HTML подсказка применяется практически ко всем элементам страницы.
Выражаясь по-другому, знакомый нам из примеров выше title="" могут иметь теги заголовков всех уровней, теги параграфов, блоков, изображения и линейные элементы, такие как , и другие.
Имею опыт размещения атрибута title="" в тегах заголовков первых уровней и в ссылках.
Лично я использую всплывающие подсказки , естественно, в рамках неизбежных любительских экспериментов по поисковой оптимизации текста сайта. Не берусь судить, насколько мои опыты оказались успешными. Честно говоря, результат подобной оптимизации проследить трудно, а вот переборщить с ключевыми словами и фразами можно очень легко. Поэтому будьте осторожны и не переусердствуйте в своем продвижении, так как всегда рискуете быть наказаны поисковиками.
Сегодня мы будем создавать всплывающие подсказки на CSS. Всплывающие подсказки — это то, что можно увидеть при наведении курсора, например на ссылку, если в атрибуте title содержится ее описание.
Всплывающая подсказка может применяться как для ссылок, так и для изображений.
В неоформленном виде всплывающая подсказка выглядит вот так:
Всплывающая подсказка выводится стандартным системным методом с помощью атрибута title.
Стандартный код ссылки с всплывающей подсказкой без оформления:
Ссылка
Всплывающая подсказка CSS
Придать оформление всплывающей подсказке можно с помощью CSS. Мы разберем три варианта всплывающей подсказки на CSS .
К сожалению, нет CSS-«рецепта» в отношении оформления title, поэтому придется добавлять дополнительные атрибуты, прописывать для них оформление и добавлять их в код ссылки/изображения, для которого мы хотим сделать красивую всплывающую подсказку CSS .
В первом примере мы сделаем всплывающую подсказку CSS поверх изображения в самом низу.
Для этого мы будем использовать два атрибута: image, а для того, чтобы всплывающая подсказка работала, — ::after и data-text для вывода текста всплывающей подсказки.
CSS-стили для данного примера:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .image { display : inline-block ; position : relative ; } .image : hover :: after { content : attr (data-text) ; /* Выводим текст всплывающей подсказки*/ position : absolute ; left : 0 ; right : 0 ; bottom : 0px ; /* Положение всплывающей подсказки */ z-index : 1 ; /* Отображаем подсказку поверх других элементов */ background : rgba (0 , 255 , 102 , 0.6 ) ; /* Цвет (RGB) и степень его прозрачности */ color : #fff ; /* Цвет текста */ text-align : center ; /* Выравниваем текст по центру */ font-family : Arial, sans-serif ; /* Гарнитура шрифта */ font-size : 11px ; /* Размер текста подсказки */ padding : 5px 10px ; /* Поля */ border : 1px solid #333 ; /* Параметры рамки */ } |
Image { display: inline-block; position: relative; } .image:hover::after { content: attr(data-text); /* Выводим текст всплывающей подсказки*/ position: absolute; left: 0; right: 0; bottom: 0px; /* Положение всплывающей подсказки */ z-index: 1; /* Отображаем подсказку поверх других элементов */ background: rgba(0,255,102,0.6); /* Цвет (RGB) и степень его прозрачности */ color: #fff; /* Цвет текста */ text-align: center; /* Выравниваем текст по центру */ font-family: Arial, sans-serif; /* Гарнитура шрифта */ font-size: 11px; /* Размер текста подсказки */ padding: 5px 10px; /* Поля */ border: 1px solid #333; /* Параметры рамки */ }
| 1 |  |
Результат:
Для ссылок такое оформление не подойдет, поэтому для них будем использовать немножко другие варианты.
Первый вариант будет выводить всплывающую подсказку над ссылкой.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .podskazka{ display : inline ; position : relative ; } .podskazka : hover : after { background : #333 ; background : rgba (204 , 102 , 0 , .8) ; border-radius : 5px ; bottom : 26px ; color : #fff ; content : attr (title) ; left : 20% ; padding : 5px 15px ; position : absolute ; z-index : 98 ; width : auto ; } .podskazka : hover : before { /* Добавляем стрелочку внизу блока всплывающей подсказки */ border : solid ; border-color : #cc6600 transparent ; border-width : 6px 6px 0 6px ; bottom : 20px ; content : "" ; left : 50% ; position : absolute ; z-index : 99 ; } |
Podskazka{ display: inline; position: relative;}.podskazka:hover:after{ background: #333; background: rgba(204,102,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: auto;}.podskazka:hover:before{ /* Добавляем стрелочку внизу блока всплывающей подсказки */ border: solid; border-color: #cc6600 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99;}
Ссылка
И последний вариант — вывод всплывающей подсказки под ссылкой. Вариант похож на предыдущий, только вывод всплывающей подсказки тут снизу.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .tooltip { position : relative ; /* Делаем элемент родительским для всплывающих подсказок */ cursor : help ; } .tooltip span { position : absolute ; /* Выводим элемент из потока */ margin-left : -30000px ; /* И прячем далеко за краем экрана */ background-color : rgba (0 , 0 , 153 , .8) ; /* Фон всплывающего блока*/ color : #fafafa ; /* Цвет текста */ padding : 10px ; /* Отступы */ -webkit-border-radius: 5px ; /* Закругляем уголки */ -moz-border-radius: 5px ; -khtml-border-radius: 5px ; border-radius : 5px ; } .tooltip : hover span { /* При наведении */ margin-left : 0 ; /* Возвращаем из далекого заэкранного края блок на место */ width : 250px ; /* Задаем ширину */ z-index : 1000 ; /* Помещаем на самый верх */ top : 30px ; /* Отступ сверху */ left : 20px ; /* Отступ слева */ } .tooltip span: after { content : "" ; /* Добавили контент */ width : 0 ; /* Спрятали его, превратив в 0 */ height : 0 ; border-bottom : 10px solid #000099 ; /* Нижним бордером задаем цвет и высоту треугольника */ border-right : 30px solid transparent ; /* Правым - ширину треугольника вправо */ position : absolute ; /* Позиционируем относительно родительского блока */ top : -10px ; left : 10px ; } |
Tooltip { position: relative; /* Делаем элемент родительским для всплывающих подсказок */ cursor: help;}.tooltip span { position: absolute; /* Выводим элемент из потока */ margin-left: -30000px; /* И прячем далеко за краем экрана */ background-color: rgba(0,0,153,.8); /* Фон всплывающего блока*/ color: #fafafa; /* Цвет текста */ padding:10px; /* Отступы */ -webkit-border-radius: 5px; /* Закругляем уголки */ -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}.tooltip:hover span { /* При наведении */ margin-left: 0; /* Возвращаем из далекого заэкранного края блок на место */ width: 250px; /* Задаем ширину */ z-index: 1000; /* Помещаем на самый верх */ /* Позиционируем относительно родительского блока */ top:30px; /* Отступ сверху */ left:20px; /* Отступ слева */ }.tooltip span:after{ content: ""; /* Добавили контент */ width:0; /* Спрятали его, превратив в 0 */ height:0; border-bottom: 10px solid #000099; /* Нижним бордером задаем цвет и высоту треугольника */ border-right: 30px solid transparent; /* Правым - ширину треугольника вправо */ position: absolute; /* Позиционируем относительно родительского блока */ top:-10px; left:10px;}
В данной статье я хочу обсудить несколько вариантов организации подобной фишки в любой верстке. Кстати, живой пример такой реализации уже имеется у меня на сайте. Если прокрутите до комментариев на этой странице и наведете на дату комментария, сразу точно станет понятно, о чем речь. Ну а если же комментариев еще нет, можете его заодно и оставить.
Я вижу два основных метода реализации всплывающей подсказки, это при наведении, он же и самый популярный, и менее популярный при клике на какой-либо элемент. Начнем естественно с появления подсказки при наведении курсора на элемент.
Я думал в данной статье начать с самого примитива, вывод подсказки с помощью title , который не получится как-либо оформить, однако я думаю его можно пропустить, так как это и так понятно. Если вышесказанное Вам не совсем понятно, думаю, после изучения видео об , все станет гораздо понятней.
Простой способ с оформлением, при наведении.
Здесь все не сложнее, чем в способе, который я пропустил. Только вместо атрибута title я буду использовать data-title и оформление с помощью стилей css. Собственно привожу ниже html-код:
/* Используем псевдоэлемент after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при наведении */ .hover:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при наведении на элемент плашка с подсказкой появилась */ .hover:hover:after{display: block;}
Здесь же хочу обратить Ваше внимание, что это только пример свойств оформления. Вы можете естественно оформить внешний вид плашки, как Вам угодно.
Всплывающая подсказка при наведении.
Это пожалуй самый популярный способ реализации данной возможности. По крайней мере я им пользуюсь чаще всего.
В данном примере так же не вижу ничего особенного, однако побольше, но и результат будет получше и без использования атрибута data-title . Контейнер в данном случае служит оболочкой для наших элементов, которые будут использованы для реализации подсказки. А так же сама плашка будет позиционироваться относительно контейнера.
/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:before {content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .hover + .hidden:after {content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при наведении */ .hover:hover + .hidden{display: block;}
Именно эти два варианта можно использовать у Вас на сайте для выведения всплывающей подсказки при наведении курсора.
Существуют еще два способа, однако они практически идентичны, за исключением того, что появление элемента происходить будет при клике по элементу, который всегда отображается на сайте.
Простой способ с оформлением, при клике.
В случае с кликом, код будет выглядеть абсолютно так же. Единственное, что для удобства я заменил класс некоторых элементов. А так же используется псевдокласс focus вместо hover . Еще здесь стоит отметить, что чтобы данный способ срабатывал, необходимо заменить на , то есть на гиперссылку.
?
Css код в этом случае аналогичен появлению плашки при наведении, только использованы для удобства другие классы. И для правильной работы меняем псевдокласс на focus .
/* Используем псевдокласс after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при клике */ .focus:after {content: attr(data-title); display: none;position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;} /* Добавляем свойство, чтобы при клике на элемент плашка с подсказкой появилась */ .focus:focus:after{display: block;}
Как видите разницы практически нет.
Всплывающая подсказка при клике.
Этот способ при клике так же будет более актуален, если Вам требуется оформить подсказку немного лучше нежели это возможно в предыдущем варианте.
И собственно оформление плашки:
/* задаем относительное позиционирование контейнеру */ .block{position:relative;} /* Оформление скрытого элемента по умолчанию */ .hidden {display: none; position: absolute; bottom: 130%; left: 0px; background-color: #fff; color: #3aaeda; padding: 5px; text-align: center; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16); box-shadow: 0 1px 1px rgba(0,0,0,.16); font-size: 12px;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:before {content: " "; position: absolute; top: 98%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: #fff transparent transparent transparent; z-index: 2;} /* Дополнительное оформление скрытого элемента(необязательно) */ .focus + .hidden:after {content: " "; position: absolute; top: 100%; left: 10%; margin-left: -5px; border-width: 5px; border-style: solid; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #fff; border-color: rgba(0,0,0,.16) transparent transparent transparent; z-index: 1;} /* Появление скрытого элемента при клике */ .focus:focus + .hidden{display: block;}
Как Вы можете наблюдать ничего сложного нет. К тому же можно организовать изменения состояний, как по наведению, так и по клику. Хотя я честно говоря, не могу сказать насколько актуален способ по клику.
Существует так же имитация последнего примера с помощью , однако его использование мне кажется не совсем правильным именно для организации всплывающей подсказки у себя на сайте. Если Вы со мной категорически не согласны, добро пожаловать в комментарии.
Видео урок — Всплывающая подсказка без скриптов.
На этом у меня все. Всем удачи.
Обеспечение дополнительной информации о потенциально сложных элементах интерфейса пользователя является очень важной частью работы веб дизайнера при разработке удобного и доступного веб сайта.
Одним из широко используемых механизмов для вывода дополнительных сведений, кроме тех, что видны на странице, являются всплывающие подсказки(элементы дизайна для отображения подсказок об определённых элементах на экране).
В то время, как существует много инновационных решений с использованием CSS и JavaScript (с или без использования фреймворка JavaScript, например, jQuery), иногда полезно взглянуть на то, как новые технологии встряхивают давно используемые методы.
В данном уроке будет показано, как с использованием только CSS можно сделать чудесные кросс-браузерные всплывающие подсказки.
 |
 |
Всплывающие подсказки - это круто!
Где бы не нужно было объяснить аббревиацию или акроним, объяснить значение слова или дать дополнительную информацию о чём-либо, всплывающие подсказки будут простым, но эффективным решением.
Начиная с маленького жёлтого блока с текстом, который появляется над элементом, таким как изображение, и выводит содержание атрибута title (или атрибута alt , если вы к несчастью используете Internet Explorer) до основанных на скриптах изощрённых решений с использованием, всплывающие подсказки являются фантастическим инструментом, который, кажется, мало популярен в сообществе дизайнеров.
Большинство браузеров имеют стили по умолчанию для всплывающих подсказок, хотя они и выглядят не очень симпатично.
Усиление эффекта воздействия всплывающих подсказок
В то время как быстро развивающиеся стандарты с новыми методами начинают все лучше и лучше поддерживаться новыми браузерами, развитие CSS также позволяет нам делать всплывающие подсказки (которые служат заменой скучным установкам по умолчанию в браузерах, как на рисунке выше) на новом уровне детализации и оформления.
Если вы уже использовали решения на основе jQuery, то, конечно же, обратите внимание на то, что JavaScript может многое из того, что недоступно CSS(например, задержка перед исчезновением выплывающей подсказки). Но выделение и оформление может быть выполнено с помощью CSS, что способствует улучшению дизайна и вдохновляет на создание других прекрасных решений, которые выходит за рамки всплывающих подсказок.
Что мы собираемся сделать
В данном уроке мы собираемся сделать всплывающие подсказки на чистом CSS .
Это означает, что они будут работать в браузерах, которые не поддерживают CSS3 (таких, как Internet Explorer 8 и старше) — они будут выглядеть в них не так хорошо, как в новых браузерах.
Вид эффектов, таких как цвета, шрифты, изображения и рамки для всплывающих подсказок будет зависеть от того, что используется на компьютере конечного пользователя (браузера, установленных шрифтов или контраста монитора).
Расширения CSS3
Использование простых, но эффективных расширений, таких как свойства border-radius и box-shadow позволяет придать обычному прямоугольнику всплывающего сообщения новый и симпатичный вид.
Что у нас под капотом?
Начнём с кода HTML для нашего примера.
различные типы всплывающих подсказок
Для того, чтобы дать вам достаточно идей для ваших собственных проектов, мы сделаем пять различных типов всплывающих подсказок.
Каждый из них выглядит очень похоже на другие, для того, чтобы стандартизировать вывод на экран. Но вы можете потом поэкспериментировать с ними для детального изучения и изменения внешнего вида.
Кросс-браузерная совместимость
Данный механизм должен работать во всех браузерах, однако, если вам нужно, вы можете изменить его по своему усмотрению.
Основная разметка
В коде, который приведен ниже, мы используем универсальный шаблон XHTML 1.0 с обычным элементом
.Так как мы используем CSS для построения наших элементов, то с целью обучения CSS встроен в документ с помощью тега
Содержимое всплывающих подсказок удаляется из поля зрения с помощью негативного значения свойства margin-left , а не display: none или visibility: hidden , так как некоторые программы для чтения с экрана игнорируют указанные свойства.
Стили CSS для всплывающих подсказок
Вскоре мы установим функционирование всплывающих подсказок для одинакового отображения в различных браузерах. А сейчас добавим несколько строк кода CSS.
Добавив приведённый ниже кусок кода мы будем выводить всплывающие подсказки на экран, хотя они и будут выглядеть банально и их сложно будет визуально отделить от остального текста.
CSS для отображения всплывающей подсказки
.tooltip:hover span { font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; } .tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; } .tooltip:hover em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; } .classic { padding: 0.8em 1em; } .custom { padding: 0.5em 0.8em 0.8em 2em; } * html a:hover { background: transparent; }Необходимость строки * html
У вас может возникнуть вопрос, для чего включена последняя строка в выше приведённом коде? Она устанавливает прозрачность для фона сслыки. Во время тестирования всплывающих подсказок выявился странный эффект в IE6, который не поддавался удалению до тех пор, пока существовал фон ссылки!
Выше приведённый код обеспечивает функционирование всплывающих подсказок. Они выводятся на экран, но их достаточно сложно отделить от общего текста. Нет цветовых схем, которые выделяют текст подсказки на странице.
Задаём цветовую схему для всплывающих подсказок/
Ниже приведённый код задаёт для каждого из пяти стилей всплывающих подсказок цветовую схему.
После изменения кода страницы и обновления её в браузере, всплывающие подсказки будут выводиться при наведении курсора мыши на ссылку почти одинаково во всех браузерах.
Код CSS для цветовой схемы
.classic { background: #FFFFAA; border: 1px solid #FFAD33; } .critical { background: #FFCCAA; border: 1px solid #FF3334; } .help { background: #9FDAEE; border: 1px solid #2BB0D7; } .info { background: #9FDAEE; border: 1px solid #2BB0D7; } .warning { background: #FFFFAA; border: 1px solid #FFAD33; }Код CSS очень прост, но он придаёт отличный вид всплывающим подсказкам и выполняет свою функцию везде. Цветовую схему можно поменять по своему усмотрению.
Несколько штрихов CSS3 для продвинутого отображения всплывающих подсказок
Перед тем, как закончить урок, вставим несколько строк кода CSS3 для придания ввизуальных эффектов нашим всплывающим подсказкам. Установим скруглённые углы с помощью свойства border-radius и придадим объёмности с помощью свойства box-shadow .
Так как ни одно из этих свойств не поддерживается глобально, то работать они будут лишь в некоторых самых новых версиях браузеров. Но там, где они будут действовать, всплывающие подсказки будут выглядеть гладенько и сексуально!
Добавим ниже приведённый код в селектор.tooltip:hover span и обновим страницу.
Визуальные эффекты для рамки, тени и прозрачности поднимают всплывающую подсказку над текстом страницы и делают информацию контрастной и лёгкой для чтения.
Вы можете заметить, что используются не только официальные свойства CSS3, но и расширения для Mozilla и WebKit.
Дополнительные свойства CSS для новых браузеров
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
Резюме
В данном уроке продемонстрировано, что для улучшения интерфейса не нужно прилагать больших усилий. Кроме того, стоит пересмотреть опыт использования CSS, который может быть полезным в вопросе установки нового уровня интерактивности веб приложения.
Эксплуатация
