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

irbees2008 Опубликовано - 17 - декабря Tooltips

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

Можешь почитать и вот эту статейку "НУ не знаю...."

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

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

Обновленное

ИзображенияСнова мучаем изображения
htaccessНастройка htaccess
РазноеПлеер YouTube на сайте с плейлистом
РазноеЧто может ИИ?
РазноеВсех с Новым Годом !
TWIGДобавляем изображение через дополнительное поле xfilds

Архив

Статистика

Caйту: 4426 дней
Новостей: 566
Комменты: 257
Зарегистрированно : 665
Онлайн всего: [6]
Гости: [4]
Поисковики: [2] Яндекс, Google
Были сегодня : [2] Яндекс, Google

SQL запросов: 29
Генерация страницы: 0.376сек
Потребление памяти: 5.182 Mb