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

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

irbees2008 irbees2008 Опубликовано - 17 - декабря Tooltips
2961 - 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; /*Цвет бордюра верха тени*/
}

Можешь почитать и вот эту статейку "HTML caption"

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

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

Теги

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

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [19]
  • Гости: [18]
  • Поисковики: [1] Google
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 29
  • Генерация страницы: 0.327сек
  • Потребление памяти: 5.319 Mb 
  •   Яндекс.Метрика