Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

Здравствуйте, всем!
Используете ли вы в своих проектах всплывающие подсказки к ссылкам или же эта функция полностью возложена на стандартные свойства браузеров? Конечно браузеры не плохо справляются с этой задачей и без всяких дополнительных примочек, но многим наверняка будет интересен не стандартный способ вывода подсказок к ссылкам, к тексту или же к изображениям. А способов таких, на сегодняшний день, разработано уйма. В статье «Простые подсказки с CSS и JQuery», подробнейшим образом рассмотрена, одна из лучших, на мой взгляд, техник исполнения организации вывода подсказок.
Мало найти стабильно и быстро работающий javascript, необходимо еще красиво оформить , придать им свой стиль. Вот как раз об оформлении подсказок с помощью новых функций , мне и хотелось бы вам рассказать. Немного фантазии, воображения и чуточку магии , экспериментируя с параметрами стиля, вы получите в свое распоряжение замечательный вид подсказок к ссылкам на своих проектах.

Сразу же должен оговориться, что не у всех пользователей браузеры поддерживающие стандарты 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

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

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>