Мини-Чат
д
c
200
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

  • Счетчики
  • Зарегистрировано
Красивый хинт на CSS3 без использования графики
Все всегда стремятся сделать свои саит уникальным и красивым в функциях, функция должна быть легкой и не нагружать страницы вашего модуля, для это есть масса стильных штучек одну из которых я вам распишу ниже как установить и настроить под дизайн своего ресурса.
Предлагаю вашему вниманию новый тип оформления ссылок, то как выглядит это можно увидеть на живом примере тутНаведите курсором на ссылкуНаведите курсором на ссылку
Подсказка для cSuCcS.3D.Ru
вставляем текст

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

Установка

Как должна выглядеть сама ссылка при наведение на которую будет вылазить окно
Что бы хинт появлялся в ссылки титры используют не совсем стандартный вариант, как правила все хинты построены на теге alt или title в нашем случае этот тип не используется так как необходимо накладывать несколько стилей для вывода класса стиля используется в ссылке class="cursorhelp blue-cursorhelp" где cursorhelp - это окно blue-cursorhelp - это цветность окна
Code
  
<a href="http://csuccs/" class="cursorhelp blue-cursorhelp">Наведите курсором на ссылку<span>Наведите курсором на ссылку<br>Подсказка для cSuCcS.3D.Ru<br>вставляем текст</span></a>

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

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

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



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



Вся настройка цвета окошка происходит во вторичном стиле к примеру как в последнем стиле светло синем
вот я расписал настройку в 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; /*Цвет бордюра верха тени*/  
  }
Комментарии(0) | Просмотров: 304 | Дата добавления: 29.05.2011 | Добавил: Vizar | Рейтинг: 0.0
BB-код:
HTMLкод:
Ссылка:
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]