Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 14. Создание всплывающей подсказки
Не нравится(-) 57 Нравится(+)
15-06-2008, 02:40 - GZ Design (Уроки CSS)
Урок CSS 14. Создание всплывающей подсказки

Наш следующий урок CSS посвящён созданию всплывающих подсказок на чистом CSS. Этот метод - один из самых простых, но не самый удобный.
Главный недостаток этого метода в том, что он основывается на теге span, который часто используется для других целей.
Итак...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №14. Создание всплывающей подсказки
style.css - Набор стилей для урока
=============================================================
*/

.tooltip {
     margin: 50px;
}

.tooltip a {
     text-decoration:none;
     color:#333;
}


.tooltip a:hover {
     position:relative; /* Установка позиции для отступов */
}

.tooltip a span {
     display:none; /* Запрет показа подсказки без наведения */
}

.tooltip a:hover span{
     font-size:8pt; /* Задание размера шрифта подсказки */
     display:block; /* Задание показа подсказки */
     position:absolute; /* Задание положения подсказки */
     top:-15px; /* Задание отступов */
     left:50px;
     background:#65b5ff; /* Задание цвета фона подсказки */
     border:1px solid #002649; /* Задание границы поля подсказки */
     color:#fff; /* Задание цвета шрифта подсказки */
     width:110px; /* Задание ширины поля подсказки */
     padding:5px;
     opacity: 0.8; /* Задание прозрачности поля подсказки */
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}


3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="tooltip">
<a href="#">текст ссылки<span>пояснение к ссылке</span></a>
</div>
</body>
</html>


4) Сохраняем и смотрим, что получилось.

Вот и всё... Метод оказался действительно простым в понимании, оформлении и использовании. Из особенностей, пожалуй только эффект прозрачности.

Совместимость: Internet Explorer 5.5 - 7 (полностью); Mozilla Firefox 2.xx (полностью); Oprea 7.хх - 9.xx (возможны искажения)
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 0,9 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 22590 раз(а) и написали 17 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
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
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!