Главная > Подсказки, Руководства, CSS/Style Sheets > Разрабатываем подсказки на CSS3 без использования скриптов

Разрабатываем подсказки на CSS3 без использования скриптов


11 августа 2011, 11:30. Разместил: Mysterious Master
* Языки: HTML/CSS
* Сложность: Средняя
* Время на выполнение: 20 минут

Конечный результат

Разрабатываем подсказки на CSS3 без использования скриптов

Скачать исходник | Посмотреть демо
Внимание! У вас нет прав для просмотра скрытого текста.


Ох уж эти подсказки, они могут быть ответом на множество вопросов пользователей, либо если вы хотите кое на что указать своим посетителям. Сегодня в интернете можно встретить множество веб-сайтов, на которых используются подсказки, но… каким же образом их лучше всего внедрить в веб-сайт? Мы хотим рассказать вам об интересном способе, абсолютно исключающем применение javascript. Сегодня мы будем разрабатывать действительно прикольные подсказки на чистом коде CSS3, а затем будем адаптировать их под мобильную версию, и именно здесь нам придется попотеть, так как здесь нам уже придется применить небольшой скрипт на javascript от Дина Эдвардса (Dean Edwards) – IE9.js.

Заметка: подсказки полностью поддерживаются браузером IE, начиная от версии 8 и выше. IE7 также поддерживает их, за исключением мобильной версии (версию с возможность кликов).

Пошаговое руководство

А теперь перейдем к расписанному по этапам руководству. Также не забудьте скачать файлы, предложенные в самом начале статьи.

Этап 1: Разработка каркаса

Шапка

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

Мы воспользовались типом файла HTML5, который указывается как !DOCTYPE html, а затем вызвали две таблицы стилей. Первая таблица отвечает за прозрачную версию, но в нашем исходном документе вы можете выбрать несколько тем оформления. Вторая таблица – это tut.css, о которой мы говорили выше, и она используется для оформления примера в нашей сегодняшней статье, поэтому вы можете свободно ей пользоваться.

После таблиц идет объявление для браузеров IE версией ниже 9. Мы использовали файл ie.css, который вызывает CSSPIE и сообщает IE 7 и 8, что здесь можно использовать функции CSS3, так как они крутые! Далее мы подкрепляем всё скриптом Dean Edwards IE9.js, чтобы дальше браузерам IE 7 и 8 сообщалось о том, что мы используем расширенные селекторы CSS.


    <meta charset="utf-8">
<link rel="stylesheet" href="styles/themes/tip-transparency.css">
<link rel="stylesheet" href="styles/tut.css">

    <!--[if lt IE 9]>
<link rel="stylesheet" href="styles/ie.css" media="screen" />
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <![endif]-->

Безопасные подсказки

Теперь, когда мы закончили разработку шапки документа, давайте перейдем к разработке каркаса непосредственно подсказок. В данной статье мы будем использовать неупорядоченный список, но вы можете использовать любой вариант, так как в CSS мы используем лишь имена классов, вместо выделения самого списка, что позволяет нам легко вставить классы в любое желаемое место.

Класс tip (т.е. li class=”tip”) используется для текста или изображений, при наведении на которые будет отображаться подсказка. Внутрь мы добавили ссылку с хэш-кодом, в котором говорится, что наша ссылка доступна.

После класса tip следует класс tooltipL (т.е. strong class=”tooltipL”), который используется для любых подсказок, которые будут отображены по левую сторону от элемента, на который был наведён курсор. В данном случае это относится к первой ссылке.

Здесь даже есть возможность добавить изображения и ссылки внутрь подсказки. Пользователь будет иметь возможности перемещать курсор мыши от элемента, на который он был наведен, на подсказку, чтобы кликнуть по ссылкам. Эта функция описана в таблице стилей, о которой мы поговорим позже.

<ul>
<li class="tip"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#">Left Tip</a><strong class="tooltipL">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" alt="" height="80" width="80"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#"> You can even add links!</a></strong></li>
</ul>

По примеру, приведенному выше, дальше в статье будет описан процесс разработки остальных подсказок. В принципе, тут всё примерно одинаково для каждой подсказки. Единственное различие в классах. Вместо tooltipL у нас будет .tooltipR для всех подсказок, расположенных по правую сторону элемента, на который наведен курсор; .tooltipB, расположенный в нижней части, и .tooltipT, расположенный в верхней части. В любое время, в которое захотите, вы можете добавить новую подсказку в собственный проект. Всё, что вам нужно будет сделать: использовать один из этих классов, в зависимости о того, где вы хотите отобразить подсказку.

<li class="tip"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#">Right Tip</a><strong class="tooltipR">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" alt="" height="80" width="80"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#"> You can even add links!</a></strong></li>
<li class="tip"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#">Bottom Tip</a><strong class="tooltipB">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" alt="" height="80" width="80"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#"> You can even add links!</a></strong></li>
<li class="tip"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#">Top Tip</a><strong class="tooltipT">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" alt="" height="80" width="80"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#"> You can even add links!</a></strong></li>

Подсказки для мобильных устройств

Разница между данным типом подсказок и подсказок для веб-интерфейса заключается в том, что мы, опять же, будем использовать разные классы (т.е. .tipClick), и просто сделаем так, чтобы по подсказке можно было кликнуть. Ведь на мобильных телефонах вы не можете навести на что-то «курсор мыши», поэтому данное решение в нашем случае помогает. Это также способствует развитию веб-сайтов, на которых пользователей побуждают к действию.

Вот мы и закончили разработку HTML. Теперь давайте взглянем на CSS, чтобы заставить нашу «детку» работать!

Этап 2: Разработка функционала и создание оформления посредством CSS

Для нашего примера мы используем стиль tip-transparency.css, но, опять же, вы можете выбрать другой стиль, который вам больше понравится.

Для того чтобы начать, нужно добавить немного стилей к нашим классам.
Здесь мы добавим параметр относительного позиционирования (position: relative), а также строчное отображение блоков. Таким образом, подсказка будет всплывать на одной линии с нашими элементами, на которые будет наведен курсор.

<ul>
<li class="tipClick"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#">Left Tip</a><strong class="tooltipL">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" alt="" height="80" width="80"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#"> You can even add links!</a></strong></li>
<li class="tipClick"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#">Right Tip</a><strong class="tooltipR">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" alt="" height="80" width="80"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#"> You can even add links!</a></strong></li>
<li class="tipClick"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#">Bottom Tip</a><strong class="tooltipB">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" alt="" height="80" width="80"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#"> You can even add links!</a></strong></li>
<li class="tipClick"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#">Top Tip</a><strong class="tooltipT">Add images in the tooltip. <img class="ref" src="images/profolio.jpg" alt="" height="80" width="80"><a href="http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/#"> You can even add links!</a></strong></li>
</ul>

Далее нам надо спрятать все подсказки до того момента, когда по соответствующим элементам не будет произведен клик, либо пока не будет наведен курсор мыши. Для этого нам нужно просто выделить класс для каждого направления и использовать параметр display: none.

    .tip, .tipClick{ /* This is any element that has a tooltip attached too it */
        position:relative !important;
        display:inline-block;
    }

Для отображения подсказки при наведении курсора или при клике, мы воспользуемся ровным счетом противоположным параметром: display: block. Что касается кликабельных подсказок, то здесь нужно акцентировать внимание на элементах, на которые был наведен курсор (т.е. первая ссылка, например), а затем мы тотчас же заранее запустим подсказку, используя селектор plus (т.е. a:focus + .tooltipL).

    .tip > .tooltipL,
    .tip > .tooltipB,
    .tip > .tooltipR,
    .tip > .tooltipT,
    .tipClick > .tooltipL,
    .tipClick > .tooltipB,
    .tipClick > .tooltipR,
    .tipClick > .tooltipT{ /* Used to hide the tooltip */
        display:none;
    }

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

Как видно, нам нужно, чтобы все подсказки выглядели идентично, поэтому у них у всех одинаковый фон и уровень плотности отображения выставлен на 85%. Также мы добавили box-shadow, что придает глубины, и задействовали сплошную границу, чтобы внутреннее содержимое отделялось от основного содержимого страницы.
Здесь также следует указать на следующие важные аспекты: min-width:200px используется для того, чтобы стрелочка была на одной строке с элементом, от которого отходит подсказка, абсолютное позиционирование (position: absolute) выставлено для того, чтобы подсказка не влияла на окружающие её элементы, а z-index: 10 используется для того, чтобы подсказка всегда была поверх всего остального содержимого.

    .tip:hover > .tooltipL,
    .tip:hover > .tooltipB,
    .tip:hover > .tooltipR,
    .tip:hover > .tooltipT, /* This shows the tooltip when an elements with the .tip class is hovered over */
    .tipClick > a:focus + .tooltipL,
    .tipClick > a:focus + .tooltipB,
    .tipClick > a:focus + .tooltipR,
    .tipClick > a:focus + .tooltipT{ /* This shows the tooltip once an element with the .tipClick class is clicked */
        display:block;
    }

Итак, что же касается различий между подсказками, то некоторые из них расположены относительно элемента, от которого они исходят. Эти значения, казалось бы, должны работать лучше всего, и не должны быть изменены, но тем не менее, если нужно будет их изменить для того, чтобы все корректно работало в ваших проектах, то лучше всего использовать динамическое ре-позиционирование посредством javascript, но это уже совсем не относится к данной статье.

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

    .tooltipL, .tooltipR, .tooltipB, .tooltipT{
        background: #333333; /* old browsers */
        background: rgba(0,0,0,0.85); /* For IE9 */
        background: -moz-linear-gradient(top, rgba(51,51,51,0.85) 0%, rgba(0,0,0,0.85) 100%); /* firefox */
        background: linear-gradient(top, rgba(51,51,51,0.85) 0%, rgba(0,0,0,0.85) 100%); /* future browsers */
        -pie-background: linear-gradient(top, rgba(51,51,51,0.25) 0%, rgba(0,0,0,0.25) 100%); /* pie for less than ie9 */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,0.85)), color-stop(100%,rgba(0,0,0,0.85))); /* webkit */
        -moz-box-shadow: 0 0 6px 1px #666666;
        -webkit-box-shadow: 0 0 6px 1px #666666;
        box-shadow: 0 0 6px 1px #666666;
        border:solid #FFFFFF;
        color: #E7E7E7;
        min-width:200px;
        padding: 5px;
        position: absolute;
        text-align: center;
        z-index: 10;
    }

Почти закончили! Теперь нам надо сделать стрелочку для подсказок, которая будет указывать на них. Опять же, здесь есть несколько различий, о которых мы расскажем чуть позже.

Итак, изучая приведенный ниже код, мы внесем стрелочку «перед» каждой подсказкой. Почему мы не можем создать стрелочку посредством CSS? Из-за объявления «content». Мы добавим абсолютное позиционирование, и таким образом мы сможем расположить стрелочку так, как нам хочется. Установите параметр display:block, а ширину/высоту по нулям, а также сплошную границу толщиной в 10 пикселей – это и будет наша стрелочка.

    .tooltipL{ /* The styling on the tooltip */
    left: -226px;
    margin-top: -28px;
    }

    .tooltipB{ /* The styling on the tooltip */
    top: 30px;
    left: -183px;
    }

    .tooltipR{ /* The styling on the tooltip */
    right: -226px;
    margin-top: -28px;
    }

    .tooltipT{ /* The styling on the tooltip */
    bottom:26px;
    left: -186px;
    }

Здесь различие заключается в направлении, в котором нам нужно, чтобы указывала стрелочка, а также то, для чего мы используем сплошной фон для одной стороны и прозрачный – для остальных. Нам также надо сдвинуть их сверху вниз и чуть вправо, чтобы стрелочка выглядела так, как будто она расположена на элементе.

    .tooltipL:before, .tooltipR:before, .tooltipB:before, .tooltipT:before{
        border-style: solid;
        border-width: 10px;
        height:0px;
        width:0px;
        position:absolute;
        display:block;
        content:"\00a0";
    }

После того, как вы сделаете это, наш урок будет окончен, а конечный результат должен быть примерно таким, как на изображении ниже. Если у вас оно не выглядит так, как показано на изображении, то вернитесь чуть назад и проверьте код на ошибки. Возможно, вы пропустили что-либо.

Разрабатываем подсказки на CSS3 без использования скриптов

Для того чтобы ваш проект выглядел так, как на изображении, используйте файл tut.css.

    .tooltipL:before{
        border-color: transparent transparent transparent #333333; /* Right facing arrow */
        top:5px;
        right:-20px;
    }

    .tooltipB:before{
        border-color: transparent transparent #333333 transparent; /* Top facing arrow */
        right:5px;
        top:-20px;
    }

    .tooltipR:before{
        border-color: transparent #333333 transparent transparent; /* Left facing arrow */
        top:5px;
        left:-20px;
    }

    .tooltipT:before{
        border-color: #333333 transparent transparent transparent; /* Bottom facing arrow */
        right:5px;
        bottom:-20px;
    }

Теперь всё!

Поздравляем! Вы только что закончили разработку подсказок для веб-страниц, не применяя ни единого скрипта javascript, если не считать принудительное внедрение для адаптации к браузерам IE 7 и 8. Надеемся, что вам понравилась эта статья, и вы сможете применить эти знания на практике.
Вернуться назад