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

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

Xara Web Designer 7 — программа для создания веб-сайтов. Создавайте свой неповторимый дизайн c помощью встроенных шаблонов, тем и макетов, разработанных профессиональными дизайнерами. Xara Web Designer — дизайн без компромиссов!

 
 

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru