В третьей по счёту статье, я бы хотел описать использование CSS для создания всплывающих подсказок (в простонародье - «хинт» или «тултип», hint и tooltip соотв.). На самом деле всё просто, и подход основывается на предыдущей статье о динамическом отображении элементов на странице.
Каркас и раскраска
Для примера возьмём шаблон гриды из первой статьи.
Общая идеология создания тултипов — держать неподалёку от «субъекта» скрытый
div с, собственно, подсказкой и показывать её при наведении курсора на элемент/строку в таблице.Например, имея вот такую строку:
<td>1</td><td>Расстрелять нельзя помиловать</td><td>135</td>сделать вот так:
<td>1</td>
<td>
Расстрелять нельзя помиловать
<div class="hint">Давайте знакомиться, я ваша первая всплывающая подсказка</div>
</td>
<td>135</td>грубо конечно, неплохо было бы текст в ячейке («Расстрелять нельзя помиловать») тоже взять в какой-нибудь
div, p или ещё что-то, но ведь ничего страшного не произойдёт, если этого не сделать ;).hint {
font-size: 0.8em;
background-color: #FFD672;
border: 1px solid #8A5802;
visibility: hidden;
position: relative;
left: 10px;
width: 100px;
}
.grid tr:hover .hint
{
visibility: visible;
z-index: 100;
}
Надеюсь здесь ничего объяснять не надо. Единственное, что для вас может быть новым, так это
z-index. Это свойство отвечает за то, в каком слое (по счёту) отображается элемент. Больше число — ближе к глазу пользователя, если можно так сказать. 0-ой уровень — уровень всех элементов по-умолчанию.читаем:
- w3schools: CSS z-index Property.
- w3.org: Elaborate description of Stacking Contexts.
- w3.org: Specifying the stack level: the 'z-index' property.
Забегу наперёд и скажу, что в таком случае вы столкнётесь с проблемой, если ещё не успели догадаться о чём я. При появлении подсказки, строка таблицы будет раздвигаться на высоту самой подсказки. Можно конечно воспользоваться
max-height для строки, но как показывает практика, это не панацея. Поэтому поступим следующим образом — заключим содержимое ячейки в отдельный div с фиксированной высотой:<td>1</td>
<td>
<div class="limiter">
Расстрелять нельзя помиловать
<div class="hint">Давайте знакомиться, я ваша первая всплывающая подсказка</div>
</div>
</td>
<td>135</td>
.limiter
{
height: 19px;
vertical-align: text-top;
}Должно выглядеть вот так. Eсли рассмотреть под микроскопом, то увидим следующее:
Что же, с этой несложной задачей справились. Теперь хотелось бы навести красоту, а именно — добавить прозрачность и тень нашим подсказкам.
Прозрачность и тени
Вот здесь есть небольшая проблемка, маленькая, очень. Дело в том, что утверждённый w3c стандарт CSS2.1 не предусматривает свойств, отвечающих за прозрачность (можно конечно баловаться полу-прозрачным png-пикселем, но это... уж извините, называется страдать #censored#), а CSS3 ещё не готов (на момент написания статьи). Вот на этом месте хотелось бы остановиться немного подробнее.
Пока CSS3 в статусе драфта (черновика), нету единой спецификации, как такой эффект (прозрачность) должен описываться и реализовываться, поэтому создатели браузеров «рисуют» прозрачность, кто как считает правильным. Поэтому будем пытаться описать нашу прозрачность всеми возможными способами для всех браузеров, что бы «работало везде».
добавим в
.grid tr:hover .hint строчки:opacity: 0.8; /* CSS3 */
-moz-opacity: 0.8; /* Mozilla Firefox */
filter: alpha(opacity=80); /* IE6/7 */
-ms-filter: "alpha(opacity=80)"; /* IE8 */
Теперь можем наслаждаться красивыми полупрозрачными всплывающими подсказками над строчками таблицы.
Остались тени (добавить к классу
.hint):box-shadow: 1px 1px 2px #000000;
-moz-box-shadow: 1px 1px 2px #000000;
-webkit-box-shadow: 1px 1px 2px #000000;Цель статьи достигнута. Как видите — обошлись без единой строчки скриптов.
Скажу ещё немного о CSS3 — это новая версия стандарта каскадных таблиц стилей, которую ждут дизайнеры, верстальщики и все, кто хоть как-то интересуется развитием IT-идустрии, интернета и сайто-строения. Обещают очень много новых фич, которые позволят отказаться от многих тривиальных JS. Например тени, колонки текста, перенос длинных слов, подгружаемые шрифты и много-много-много ещё. Все уважающие себя браузеры борятся за лейбочку «CSS3-compatible», хоть он ещё и драфт, ну и правильно. Многие web-разработчики уже вовсю применяют «вкусности» нового стандарта. Более подробно можно почитать:
- http://www.w3.org/TR/css3-roadmap/
- http://www.css3.com/
- http://www.css3.info/
- ну или банальное гугление вам в помощь ;)
Но и это не всё («Никогда не останавливайся на достигнутом» - ну и не будем ;)). Хочется показать замечательный эффект плавного изменения прозрачности (fade-effect).
Анимация
Используем CSS-свойство
-webkit-transition для webkit-browsers-only (Safari, Chrome). Да, вы правильно поняли, увидеть как это работает вы сможете только в браузерах на webkit движке (http://webkit.org/, http://en.wikipedia.org/wiki/WebKit)..hint
{
font-size: 0.8em;
background-color: #FFD672;
border: 1px solid #8A5802;
visibility: hidden;
position: relative;
left: 10px;
width: 100px;
opacity: 0.0; /* CSS3 */
filter:alpha(opacity=0); /* IE */
-moz-opacity: 0.0; /* Mozilla Firefox */
-webkit-transition: -opacity 0.0s ease-out;
}
.grid tr:hover .hint
{
visibility: visible;
opacity: 0.8; /* CSS3 */
-moz-opacity: 0.8; /* Mozilla Firefox */
filter:alpha(opacity=80); /* IE6/7 */
-ms-filter:"alpha(opacity=80)"; /* IE8 */
-webkit-transition-duration: 0.35s;
z-index: 100;
}
Главная идея — установить для невидимой подсказки прозрачность
=0 по-умолчанию, а при появлении плавно изменять её до нужных нам 0.8 при помощи -webkit-transition-duration, в нашем случае задержка 0,35 сек.Как добиться подобного эффекта в других браузерах (если это возможно), разбирайтесь/ищите сами, моя задача была повернуть вашу голову в нужное направление, а дальше «Сам любий, сам» :).
Комментариев нет:
Отправить комментарий