Хаки и Скрипты Next Generation CMS

Красивые всплывающие подсказки на CSS3 без использования графики

  1. Главная страница
  2. Tooltips
irbees2008 irbees2008 Опубликовано - 17 - декабря Tooltips
3071 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

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

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

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

2.Теперь для этой ссылки выбираем цвет стиля и вставляйте его в таблицу стилей
Серый цвет подсказки подсказки:
Код:
.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;  
  }

Зеленый цвет подсказки подсказки:
Код: Выделить всё
Код:
.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;  
  }
Красный цвет подсказки подсказки:

Код:
.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;  
  }

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

Код: Выделить всё
.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;  
  }
Синий цвет подсказки подсказки:

Код:
.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 Цвет бордюра верха тени
Код:
/* 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; /*Цвет бордюра верха тени*/  
  }

Можешь почитать и вот эту статейку "Подключаем PhpConsole на NGCMS"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Популярное

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Ссылки

Обновленное

Архив

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4612 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [22]
  • Гости: [21]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.449сек
  • Потребление памяти: 5.492 Mb 
  •   Яндекс.Метрика