Уважаемые пользователи skript-na-ucoz.ucoz.ru. Вы найдете у нас на портале - и сможете скачать бесплатно различные программы для вебмастеров и не только, фильмы, игры, все для фотошопа, скрипты для ваших сайтов, бесплатные шаблоны, модули, хаки и релизы популярных CMS таких-как: Datalife Engine, WordPress, Joomla, Drupal, Ucoz и многое другое, а также обсудить и получить помощь на нашем форуме. С Уважением Администрация skript-na-ucoz
Главная » Скачать бесплатно » Скачать Всё для Ucoz » Скачать Скрипты для Ucoz
Красивый хинт на CSS3 без использования графики
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
09.06.2011, 19:00


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

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

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

<a href="http://ucozua.ru/index/podskazka_primer_skripta/0-395" class="cursorhelp blue-cursorhelp">Наведите курсором на ссылку<span>Наведите курсором на ссылку<br>Подсказка для uCozUa.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;  
  }  

  /* 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 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; /*Цвет бордюра верха тени*/  
  }
Категория: Скачать Скрипты для Ucoz бесплатно | Добавил: maksimSR7331
Просмотров: 239 | Загрузок: 0
Новый эффект движения,тряски текста,картинки и всего v.1   Топ сайтов как на ucozon (new)
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Разное
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Анализ сайта skript-na-ucoz.ucoz.ru Top.Mail.Ru

Яндекс.Метрика
Сейчас online
Онлайн всего: 3
Гостей: 3
Пользователей: 0
Сегодня наш сайт посетили
[Полный список]
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
    • Всего юзеров: 1196
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
    • Всего файлов: 10242
    Всего новостей: 31
    Всего статей: 0
    Темы форума: 2521
    Коментариев: 16
    Фотоальбом: 3
    Скачали: 10242
    Каталог сайтов: 35
    Онлайн Игр: 213
    Онлайн Видео: 8596
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером
    Меню сайта
    Категории
    Шаблоны для Ucoz
    Шапки для Ucoz
    Скрипты для Ucoz
    Иконки для Ucoz
    Кнопки для Ucoz
    Уроки для Ucoz
    Статьи для Ucoz
    Прочее для Ucoz
    Популярное
    Регистрация после прочтения и принятия правил для ucoz
    Скрипты для Ucoz
    Крылья из воды
    Прочее для фотошопа
    Blue Whales Icon
    Иконки для Ucoz
    Топ сайтов
    Скрипты для Ucoz
    cs шаблон под ucoz
    Шаблоны для Ucoz
    Обсудить на форуме
    Скачиваемое
    Программа Filin 3.7.1. Бесплатный аналог Post News(Add News)
    Интернет / Сети
    Деньги различных стран
    Шаблоны для фотошопа
    Новый вид материалов для ucoz
    Скрипты для Ucoz
    Шаблон с мужчиной в деловом костюме на фоне машины.
    Шаблоны для фотошопа
    Скрипт - Меняем цвет прицела в Counter-Strike 1.6 таблица цветов
    Скрипты
    Обсудить на форуме
    Интерестное
    Пак шаблонов для uCoz(Shablon's pack) by KEY-CS
    Шаблоны для Ucoz
    Шапка для сайта FootBall (футбол)
    Шапки для Ucoz
    Торрент шаблон для ucoz
    Шаблоны для Ucoz
    Вертикальное меню в стиле сталкер
    Скрипты для Ucoz
    Скрипт Лента новостей для Ucoz для uCoz
    Скрипты для Ucoz
    Обсудить на форуме