апреля 09, 2012

Как оформить стиль всплывающих подсказок с помощью CSS3


Здравствуйте, всем!


Используете ли вы в своих проектах всплывающие подсказки к ссылкам или же эта функция полностью возложена на стандартные свойства браузеров? Конечно браузеры не плохо справляются с этой задачей и без всяких дополнительных примочек, но многим наверняка будет интересен не стандартный способ вывода подсказок к ссылкам, к тексту или же к изображениям. А способов таких, на сегодняшний день, разработано уйма. В статье «Простые подсказки с CSS и JQuery», подробнейшим образом рассмотрена, одна из лучших, на мой взгляд, техник исполнения организации вывода подсказок.
Мало найти стабильно и быстро работающий javascript, необходимо еще красиво оформить подсказки, придать им свой стиль. Вот как раз об оформлении подсказок с помощью новых функций CSS3, мне и хотелось бы вам рассказать. Немного фантазии, воображения и чуточку магии CSS3, экспериментируя с параметрами стиля, вы получите в свое распоряжение замечательный вид подсказок к ссылкам на своих проектах.
Сразу же должен оговориться, что не у всех пользователей браузеры поддерживающие стандарты CSS3, по сей день еще большое количество товарищей пользуют замшелые версии IEшки и они не увидят всей прелести оформления. В современных версиях браузеров (Firefox, Opera 11+, Chrome, Safari, IE 8+) все работает отлично и проблем с отображением подсказок нет.




CSS3

Первый вариант стилей оформления подсказок был прост до безобразия, без каких либо навороченных функций, использовался цвет фона (background-color), закругленные углы (border-radius), да порядок наложения (z-index) при абсолютном позиционировании и выглядел примерно так:

.tip { 
 color: #fff;  /*--Цвет текста--*/
 background:#1d1d1d;  /*--Фон тела подсказки--*/
 display:none;   /*--По умолчанию скрыта--*/ 
 padding:10px;   /* Поля вокруг текста */
 position:absolute; z-index:1000;
 -webkit-border-radius: 3px;  /*--Закругленные углы--*/
 -moz-border-radius: 3px;
 border-radius: 3px;
 }

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

Экспериментировать с параметрами стилей вы можете как угодно, примеряя различные варианты оформления, лишь бы в радость и не во вред целостности общей картины. Например, браузеры не плохо стали обрабатывать функцию линейного градиента, зачем упускать такую возможность, добавим к стилю нашей подсказки этот параметр. Для большей привлекательности используем эффект тени (box-shadow), поиграв с параметрами цвета тени, смещения и растяжения, можно добиться потрясающих результатов, и все это укладывается в несколько строк кода CSS:


/*--Стиль Подсказки--*/
 .tip { 
 color: #fff; 
 background-color:#161616; 
 background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%); 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7))); 
 background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%); background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%); 
 background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,
endColorstr=#B2333333); 
 -moz-box-shadow:0 1px 10px #00c6ff;
 -webkit-box-shadow: 0 1px 10px #00c6ff;
 box-shadow:0 1px 10px #00c6ff; 
 display:none; /*--По умолчанию скрыто--*/
 padding:10px;
 position:absolute;
 z-index:1000; 
 -webkit-border-radius: 3px; 
 -moz-border-radius: 3px; 
 border-radius: 3px;
 }

Демо

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

Источник: Dodrovoimaster

Комментариев нет:

Отправить комментарий