Приятные всплывающие подсказки с использованием CSS3 и jQuery

Очевидно, что всплывающие подсказки существенно улучшают удобство использования интерфейсом приложения. В данном уроке мы создадим практическое решение с применением CSS3 и jQuery.

Для текста подсказок будет использоваться атрибут HTML5 data-*. А основными преимуществами предлагаемого решения будут:

Структура, которая будет служить основой для наших подсказок, имеет следующий вид:

<b data-tooltip="Fantasy Action Adventure">Batman: Arkham City</b>

Для создания 3D вида подсказок используются следующие стили:

.tooltip {
        position: relative;
        display: inline-block;
        cursor: help;
        white-space: nowrap;
        border-bottom: 1px dotted #777;
}

.tooltip-content {
        opacity: 0;
        visibility: hidden;
        font: 12px Arial, Helvetica;
        text-align: center;
        border-color: #aaa #555 #555 #aaa;
        border-style: solid;
        border-width: 1px;
        width: 150px;
        padding: 15px;
        position: absolute;
        bottom: 40px;
        left: 50%;
        margin-left: -76px;

        background-color: #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
        background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        -moz-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-transition: bottom .2s ease, opacity .2s ease;
        -moz-transition: bottom .2s ease, opacity .2s ease;
        -ms-transition: bottom .2s ease, opacity .2s ease;
        -o-transition: bottom .2s ease, opacity .2s ease;
        transition: bottom .2s ease, opacity .2s ease;
        }

.tooltip-content:after,
.tooltip-content:before {
        border-right: 16px solid transparent;
        border-top: 15px solid #fff;
        bottom: -15px;
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -10px;
}

.tooltip-content:before {
        border-right-width: 25px;
        border-top-color: #555;
        border-top-width: 15px;
        bottom: -15px;
}

.tooltip:hover .tooltip-content{
        opacity: 1;
        visibility: visible;
        bottom: 30px;
}

Код jQuery выполняет всю "грязную" работу. С помощью значения атрибута HTML5 data-tooltip он добавляет новый элемент в DOM: <span class="tooltip-content">, который анимируется с помощью CSS3.

IE6 требует специальных ухищрений, что видно в выше приведенном коде.

Демонстрационный код можно попробовать в различных браузерах. В старых версиях функционал сохранится, но потеряется внешний лоск подсказок.

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

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

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



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

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