Красивые подсказки на CSS3
15 сентября 2011 года, Размещено в категории: HTML / CSS
Добрый день, сегодня хочу представить вам урок по созданию простых подсказок на CSS3 которые очень красиво будут смотреться на сайте и при этом нести огромную помощь, помогая пользователям понять смыл термина или слова.

Суть идеи
Используя псевдо – элемент CSS :hover, мы будем выводить бокс с подсказкой при наведении на другой бокс, к которому прописаны уточняющие данные. Не используется Java Script и JQuery.
При оформлении бокса с подсказками используются основные свойства CSS3: градиенты, закруглённые углы, тени. Можно конечно обойтись без них, но будет не так красиво смотреться.
Можете посмотреть демо версию, чтобы понять как это выглядит:
Код
HTML
Для примера добавим ссылку, присвоем ей класс .tip и пропишем текст подсказки в теге
<a class="tip" href="#"> Проверка сязи А это подсказка, она поможет вам </a> |
CSS
Начнём оформлять присвоенный нами ранее класс .tip и подскзку в span. Оформление весьма обычное и у вас не должны возникнуть сложности.
body{background-image: url("blue_grange.jpg");} .tip{ background: #fdfffc; position: relative; cursor: help; /* При наведении курсора на блок, появляется знак вопроса */ width:140px; /* Ширина блока */ height:30px; /* Высота блока */ display: inline-block; text-decoration: none; color: #2c2d2d; -moz-border-radius: 5px; border-radius: 5px; outline: none; top:300px; left:50%; font-size:20px; text-align:center;} .tip:hover span{ visibility: visible;} .tip span{ /* Оформление блока с подсказкой */ visibility: hidden; width: 235px; bottom: 40px; /* Расстояние между блоками */ position: absolute; left: 50%; z-index: 50; margin-left: -125px; padding: 11px; border: 1px solid #c4c4c4; -moz-border-radius: 5px; border-radius: 5px; opacity: 0.9; /* Градиент */ background-image: -moz-linear-gradient(center bottom,#F5D1FF 2%,#EEC8FA 51%); background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0.02, #F5D1FF),color-stop(0.51, #EEC8FA)); /* Тень */ text-shadow: 0.3px 0.3px 0.8px #383038; -webkit-box-shadow: 1px 2px 2px 1px #898989; -moz-box-shadow: 1px 2px 2px 1px #898989; box-shadow: 1px 2px 2px 1px #898989;} |
CSS3 фактически используется только для оформления, а вывод и.т.п. доступны были и в старой версии каскадных стилей, поэтому такой способ будет работать на всех старых браузерах.
Использовать можно автоматически: прописать у себя на блоге в style.css все настройки оформления и в будущем при оформлении текстов просто указывать класс .tip, прописывать текст подсказки в и такой вид подсказок будет работать на всём сайте. На этом всё, спасибо за внимание.
11 лет назад
Спасибо! Обязательно попробую!!!
Андрей
10 лет назад
В Опере (последней) бэкграунд подстказки не работает. Т.е. он не розовый.
10 лет назад
Может быть, опера это вообще отдельная песня.