Здравствуйте, всем!
Используете ли вы в своих проектах всплывающие подсказки к ссылкам или же эта функция полностью возложена на стандартные свойства браузеров? Конечно браузеры не плохо справляются с этой задачей и без всяких дополнительных примочек, но многим наверняка будет интересен не стандартный способ вывода подсказок к ссылкам, к тексту или же к изображениям. А способов таких, на сегодняшний день, разработано уйма. В статье «Простые подсказки с 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:
Экспериментировать с параметрами стилей вы можете как угодно, примеряя различные варианты оформления, лишь бы в радость и не во вред целостности общей картины. Например, браузеры не плохо стали обрабатывать функцию линейного градиента, зачем упускать такую возможность, добавим к стилю нашей подсказки этот параметр. Для большей привлекательности используем эффект тени (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
Комментариев нет:
Отправить комментарий