Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 26. Создание всплывающей подсказки на CSS 3.0
Не нравится(-) 5 Нравится(+)
14-09-2011, 01:09 - OniX (Уроки CSS)
Урок CSS 26. Создание всплывающей подсказки на CSS 3.0

Здравствуйте дорогие друзья, все посетители сайта Российской школы CSS. Сегодня, после длительного перерыва, мы возобновляем активную работу сайта и форума. Начнем с довольно простого урока по созданию красивой всплывающей подсказки средствами CSS 3.0.
Итак, приступим к созданию.

В данном уроке не будут использоваться какие-либо изображения, так что понадобится только текстовый редактор. Рекомендую пользоваться Notepad ++. Создаём в программе два чистых файла: index.html и style.css (в одной папке).
В код html страницы записываем стандартный начальный код для XHTML, содержащий ссылку на файл стилей (style.css):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Всплывающая подсказка на CSS 3.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

Далее идет содержание страницы, которое включает в себя всплывающую подсказку для ссылки и окончание документа:
<body>
Текст Текст Текст Текст
<a href="#" class="tooltip">
  Текст с подсказкой
  <span>Текст всплывающей подсказки</span>
</a>Текст Текст Текст
</body>
</html>

Всё, больше нам не понадобится HTML файл. Начинаем работу с файлом стилей style.css:
/*
=============================================================
© 2011 Red Team Design
© 2011 Российская школа CSS (Russian CSS School)

http://www.css-school.ru
Урок CSS №26. Всплывающая подсказка на CSS 3.0
style.css - Набор стилей для урока
=============================================================
*/

.tooltip
{
  position: relative;
  background: #eaeaea;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}

.tooltip span
{
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 0;
}

.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}


Как видно из стилей, довольно сложное графическое отображение всплывающей подсказки сделано без помощи картинок, а лишь с помощью атрибутов CSS 3.0 (см. .tooltip span).

Однако, не стоит забывать, что устаревшие версии браузеров не поддерживают (или поддерживают не в полной мере) не только эффекты CSS 3.0, но и псевдоклассы (:hover). Исправляет это скрипт введенный между тегами head в index.html. Вот этот код:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
  $(function() {
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {
      $('.tooltip').mouseover(function(){
            $(this).children('span').show();
          }).mouseout(function(){
            $(this).children('span').hide();
          })
    }
  });
</script>


Вот и всё. Надеюсь урок оказался полезным и понятным для Вас. Скачать материалы урока и посмотреть демо можно на этой странице.
Спасибо за внимание!

Автор урока: Red Team Design (_http://www.red-team-design.com/)
Автор перевода: Илья Сальников, Российская школа CSS
Совместимость: Internet Explorer 6 - 9; Mozilla Firefox, Opera, Chrome, Safari.


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



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

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

Публикацию посмотрели 12389 раз(а) и написали 1 комментариев.
Подписаться на канал 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!