Сегодня 5 января, воскресенье ГлавнаяНовостиО проектеЛичный кабинетПомощьКонтакты Сделать стартовойКарта сайтаНаписать администрации
Разделы
Каталоги
Блоги
Добавить блог
Сообщества
Добавить сообщество
Сервисы
Создание аватар
Блограйдеры
TOP блограйдеров
Обратная связь
Техподдержка
Контакты
Блогосфера
Интервью
Поиск по сайту
 
Ваше мнение
Какой рейтинг вас больше интересует?
 
 
 
 
 
Проголосовало: 7278
Кнопка
BlogRider.ru - Каталог блогов Рунета
получить код
Главная / Каталог блогов / Cтраница блогера Хаки и Скрипты Next Generation CMS / Запись в блоге
Хаки и Скрипты Next Generation CMS
Хаки и Скрипты Next Generation CMS
Голосов: 1
Адрес блога: http://ngcmshak.ru
Добавлен: 2013-12-31 14:21:51 блограйдером 88888888
 

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

2013-12-17 02:16:47 (читать в оригинале)

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

Чтобы подсказка появлялся в ссылке используется не совсем стандартный вариант, как правило все подсказки построены на теге 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; /*Цвет бордюра верха тени*/  
  }

Тэги: tooltips

 
BlogRider сегодня
Блограйдеров
14502
 
Блогов
219930
Самый-самый блог
Блогер ЖЖ все стерпит
ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»
Изменения рейтинга
Категория «Блогосфера»
Взлеты Топ 5
+1241
 		1261
 		Robin_Bad
+1175
 		1263
 		Futurolog
+1090
 		1094
 		MySQL Performance Blog
+1028
 		1098
 		Ksanexx
+1023
 		1097
 		Refinado
Падения Топ 5
-2
 		511
 		партнерки
-3
 		605
 		Блог о раскрутке и монетизации сайта.
-3
 		86
 		Mandalaй.ru
-4
 		17
 		Выводы простого человека
-4
 		39
 		БЛОГика
Главные темы
Популярные за сутки

300ye 500ye all believable blog cake cardboard charm coat cosmetic currency disclaimer energy finance furniture hollywood house imperial important love lucky made money mood myfxbook new poetry potatoes publish rules salad sculpture seo size trance video vumbilding wardrobe weal zulutrade агрегаторы блог блоги богатство браузерные валюта видео вумбилдинг выводом гаджеты главная денег деньги звёзды игр. игры императорский картинка картон картошка клиентские косметика летящий любить любовь магия мебель мир настроение невероятный новость обзор онлайн партнерские партнерских пирожный программ программы публикация размер реальных рубрика рука сайт салат своми стих страница талисман тонкий удача фен феншуй финансы форекс цитата шкаф шуба шуй энергия юмор 2009


Загрузка...Загрузка...
Copyright © 2007–2025 BlogRider.Ru Главная  |  Новости  |  О проекте  |  Личный кабинет  |  Помощь  |  Контакты Дизайн — =Ex= Design Studio
BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.