Красивый хинт на CSS3 без использования графики для системы ucoz - - - Скрипты - Bestarchive-soft, music, movies, books, scripts, photos

Выберите раздел

Главная страница

Полезные советы

Каталог файлов

Скрипты разные

Форум

Клипы

Играй онлайн

Гостевая книга

Красивый хинт на CSS3 без использования графики для системы ucoz

12.12.2011, 16:50

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

Интересное оформление придаст ссылкам полное описание их, для поисковиков не известно как поведет свое описание но спойлером ссылки назвать не возможно данный вид.
В настройках вид очень прост так как все настройки в самом style

Установка

Как должна выглядеть сама ссылка при наведение на которую будет вылазить окно
Что бы хинт появлялся в ссылки титры используют не совсем стандартный вариант, как правила все хинты построены на теге alt или title в нашем случае этот тип не используется так как необходимо накладывать несколько стилей для вывода класса стиля используется в ссылке class="cursorhelp blue-cursorhelp" где cursorhelp - это окно blue-cursorhelp - это цветность окна

Code

<a href="http://ucozon.ru/dir/11-1-0-4648" class="cursorhelp blue-cursorhelp">Наведите курсором на ссылку<span>Наведите курсором на ссылку<br>Подсказка для uCozOn.ru<br>вставляем текст</span></a>

Тепеть для этой ссылки выбирайте цвет стиля и вставляйте его в таблицу стилей что бы он смог охватить весь сайт, есть где бы вы не оформили подобным методом линк на него будет выводить класс оформления

Установка стиля для вывода хинта:
Вставляем в таблицу стилей CSS нашего сайта сам стиль CSS3 предварительно выбрав цвет его из ниже указанных.

Серый цвет подсказки хинта

Code

.cursorhelp
  {
  position: relative;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
  }

  .cursorhelp span
  {
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #ddd;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  }

  .cursorhelp:hover
  {
  border: 0; /* IE6 fix */
  }

  .cursorhelp:hover span
  {
  visibility: visible;
  }

  .cursorhelp span:before,
  .cursorhelp span:after
  {
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #ddd;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 0;
  }

  .cursorhelp span:before
  {
  border-top-color: #ccc;
  bottom: -8px;
  }

Зеленый цвет подсказки хинта

Code

Красный цвет подсказки хинта

Code

Желтый цвет подсказки хинта

Code

Синий цвет подсказки хинта

Code

Вся настройка цвета окошка происходит во вторичном стиле к примеру как в последнем стиле светло синем
вот я расписал настройку в 4 цвета
1 Цвет бордюра
2 Цвет фона
3 Цвет бордюра уголка стрелки
4 Цвет бордюра верха тени

Code

/* Color bluue*/

  .blue-cursorhelp span
  {
  border-color: #59add4; /*Цвет бордюра*/
  background-color: #61bde7; /*Цвет фона*/
  }

  .blue-cursorhelp span:after
  {
  border-top-color: #61bde7; /*Цвет бордюра уголка стрелки*/
  }

  .blue-cursorhelp span:before
  {
  border-top-color: #59add4; /*Цвет бордюра верха тени*/
  }