Оформление стиля всплывающих подсказок с помощью 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, ваши пояснения к ссылкам будут отображаться быстро и выглядеть эффектно, тем самым радуя глаз пользователей, а это уже само по себе еще один шаг к успеху проекта. Выбор всегда остается за вами, уважаемые читатели, я например, как не сложно наверное было заметить, не использую нестандартные подсказки на этом блоге, может быть и зря ))))
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 0