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

Можешь почитать и вот эту статейку "Меняем в плагине basket alert на аякс окошко с оформлением"

mistakes

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

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

Ваше мнение

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

----