Все всегда стремятся сделать свои саит уникальным и красивым в функциях, функция должна быть легкой и не нагружать страницы вашего модуля, для это есть масса стильных штучек одну из которых я вам распишу ниже как установить и настроить под дизайн своего ресурса.
Предлагаю вашему вниманию новый тип оформления ссылок, то как выглядит это можно увидеть на живом примере тут
Наведите курсором на ссылкуНаведите курсором на ссылку Подсказка для uCozOn.ru вставляем текст Интересное оформление придаст ссылкам полное описание их, для поисковиков не известно как поведет свое описание но спойлером ссылки назвать не возможно данный вид.
В настройках вид очень прост так как все настройки в самом 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
.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; } /* Color red*/ .blue-cursorhelp span { border-color: #ff0000; background-color: #ff3300; } .blue-cursorhelp span:after { border-top-color: #ff3300; } .blue-cursorhelp span:before { border-top-color: #ff0000; }
Красный цвет подсказки хинта
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; } /* Color zeleni*/ .blue-cursorhelp span { border-color: #00ff00; background-color: #00FF00; } .blue-cursorhelp span:after { border-top-color: #00FF00; } .blue-cursorhelp span:before { border-top-color: #00FF00; }
Желтый цвет подсказки хинта
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; } /* Color galban*/ .blue-cursorhelp span { border-color: #FFFF00; background-color: #FFFF66; } .blue-cursorhelp span:after { border-top-color: #FFFF66; } .blue-cursorhelp span:before { border-top-color: #FFFF00; }
Синий цвет подсказки хинта
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; } /* 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; }
Вся настройка цвета окошка происходит во вторичном стиле к примеру как в последнем стиле светло синем
вот я расписал настройку в 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; /*Цвет бордюра верха тени*/ }
Автор\Источник: ucozon.ru
Для того что бы скачать архив необходимо зайти на сайт как пользователь.