Простые подсказки на CSS3

Иногда кнопке или изображению нужно прикреплять дополнительную информацию, для того чтобы пользователь понял, для чего она вообще нужна. Единственным решением является создание простых всплывающих подсказок. В этом уроке мы покажем вам, как создать подсказки на CSS: без изображений и javascript.

“Зачем мне нужны CSS подсказки?”

Конечно же вы можете использовать HTML атрибут title, для того чтобы организовать систему подсказок. Дело в том, что по умолчанию данные элементы нельзя стилизовать. Если вы хотите предоставлять своим пользователям красивые подсказки, то эта статья для вас.

Что и как мы будем делать

Наверняка данная техника вам знакома. Я буду использовать значения позиционирования relative и absolute, для того чтобы расположить подсказки. В этой статье я не пытаюсь изобрести колесо, просто пытаюсь создать красивые подсказки на CSS3.

Ниже вы можете увидеть структуру (прошу заметить, что я использую псевдо элементы :before и :after):

Теперь я бы хотел перечислить технологии, которые использовал:

  • Градиент
  • Тень
  • Псевдо элементы

HTML

<a href="#" class="tooltip">
  ваш текст
  <span>ваша подсказка</span>
</a>

Почему ссылка?

Данное решение принято только по той причине, что нам надо добиться совместимости с IE6. Данный браузер зачастую не понимает псевдо класс :hover.

<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>

CSS

.tooltip
{
  position: relative;
  background: #eaeaea;
  cursor: help;
  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;
}

Поддержка браузеров

Данный код будет работать в IE6 и IE7, но возможны некоторые искажения в отображении.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/cxNBTCFsm_A/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Простые подсказки на CSS3 | | 2012-06-19 12:08:49 | | Статьи Web-мастеру | | Иногда кнопке или изображению нужно прикреплять дополнительную информацию, для того чтобы пользователь понял, для чего она вообще нужна. Единственным решением является создание простых всплывающих | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: