Главная » Файлы » Прочие скрипты » CSS
Идеальные хинты (подсказки) на чистом CSS для вашего сайта
[ Скачать с сервера (1.2 Kb) ] 19.09.14, 09:42:06



Сегодня увидел замечательные настраиваемые хинты на чистом css и не смог не поделиться ими с пользователями apo-ucoz

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

После < /head > на нужных страницах вставляйте:
Код
<link rel="stylesheet" type="text/css" href="/css/hint.min.css">


Элементы, для которых нужны подсказки, оформляются вот так:
Код
<span class="hint--top hint--bounce" data-hint="Apo-ucoz.com - только самые вкусные скрипты">Подсказка сверху. Стиль - с эффектом подпрыгивания</span>


Давайте рассмотрим настройки и перечислим, что можно изменять:

span class="hint--top hint--bounce" data-hint="Apo-ucoz.com- только самые вкусные скрипты"

То, что помечено красным - первый класс отвечает за положение, второй - за тип эффекта подсказки

То, что помечено оранжевым - текст, который будет отображаться в подсказке при наведении на элемент

Давайте рассмотрим положения хинта:


  • hint--top - сверху
  • hint--right - справа
  • hint--bottom - снизу
  • hint--left - слева


Теперь давайте рассмотрим настройки, которые нам даёт этот замечательный css фреймворк:


  • hint--error - красный цвет
  • hint--warning - оранжевый цвет
  • hint--info - синий цвет
  • hint--success - зелёный цвет
  • hint--always - подсказка всегда видна
  • hint--rounded - с закруглёнными краями
  • hint--no-animate - без анимации
  • hint--bounce - всплывание с эффектом подпрыгивания


По желанию вы можете дописать свои цвета и типы настроек, имея даже базовые знания css и немного поковыряв файл hint.min.css

Теперь залейте файл стиля из прикреплённого архива в папку css

Материал подготовлен Apocalypse
Категория: CSS | Добавил: Apocalypse | Теги: CSS, Идеальные, чистом, на, Вашего, хинты, сайта, для, (подсказки)
Просмотров: 793 | Загрузок: 246 | Рейтинг: 1.0/3
Всего комментариев: 0
Имя *:
Email: