Підказки до посилань з допомогою CSS

161

Всплывающие подсказки к ссылкам с помощью CSS

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

На цей раз навчимося робити підказки до посилань, використовуючи тільки CSS. Знову ж таки як завжди, для перегляду того, що ми отримаємо в результаті ,просто перейдіть на сторінку демонстрації, і якщо вам сподобався вид підказки , сміливо приступайте до її виготовлення.

Дивитися Демо

Тепер подивимося, як же це реалізується на рівні коду?

Крок 1.

Ваше таблиці стилів або безпосередньо на сторінці створіть стиль через , слід прописувати між тегами .

Для першої (інформаційної)підказки:

 .tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#FCFBDC;
border:1px solid #333333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:0 1px 10px #00c6ff;
-webkit-box-shadow: 0 1px 10px #00c6ff;
box-shadow:0 1px 10px #00c6ff;
padding:5px;
font-size:11px;
color:#333333;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#FCFBDC;
border:1px solid #333333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:0 1px 10px #00c6ff;
-webkit-box-shadow: 0 1px 10px #00c6ff;
box-shadow:0 1px 10px #00c6ff;
padding:5px;
font-size:11px;
color:#333333;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

Для другої (попереджувальної) все в тому ж дусі і там же:

.warning { position:relative; z-index:24; }
.warning span { display:none; }
.warning:hover {z-index:25;}
.warning:hover span {
display:block;
z-index:25;
position:absolute;
width:250px;
top:25px;
left:20px;
background:#FCE4E4 url(warning.gif) no-repeat left;
border: 1px solid #990000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:0 1px 10px #0ff742e;
-webkit-box-shadow: 0 1px 10px #ff742e;
box-shadow:0 1px 10px #ff742e;
padding:5px 5px 5px 35px;
font-size:11px;
color:#990000;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.warning { position:relative; z-index:24; }
.warning span { display:none; }
.warning:hover {z-index:25;}
.warning:hover span {
display:block;
z-index:25;
position:absolute;
width:250px;
top:25px;
left:20px;
background:#FCE4E4 url(warning.gif) no-repeat left;
border: 1px solid #990000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:0 1px 10px #0ff742e;
-webkit-box-shadow: 0 1px 10px #ff742e;
box-shadow:0 1px 10px #ff742e;
padding:5px 5px 5px 35px;
font-size:11px;
color:#990000;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

Крок 2.

Щоб все запрацювало нам залишиться лише додати посилання на сторінки сайту в такому форматі:

Для інформаційної підказки:

 <a href="http://dbmast.ru" class="tooltip" target="_blank"><span>Якщо Ви натиснете на цю посилання, то потрапите на мій блог.</span>Посилання на мій блог !</a>

Якщо Ви натиснете на цю посилання, то потрапите на мій блог.Посилання на мій блог !

Для підказки попереджає:

<a href="http://www.photoshop-master.ru" class="warning" target="_blank"><span>Увага! Ні в якому разі не натискайте на посилання, інакше Ви потрапите на сайт про фотошопі!Тільки якщо воно вам треба!</span>Посилання попередження!</a>

Увага! Ні в якому разі не натискайте на посилання, інакше Ви потрапите на сайт про фотошопі!Тільки якщо воно вам треба!Посилання попередження!

Весь сенс в тому, що саму підказку ви ставите між тегами, які знаходяться всередині посилання, і яких не видно до тих пір, поки це посилання не наведе курсор миші.
У попереджуючим підказці присутнє зображення, можете забрати його тут , або в исходниках він теж є.
Покласти картинку потрібно в ту ж папку, де лежить сама сторінка. Або можна покласти куди завгодно, але при цьому не забудьте прописати до неї вірний шлях в CSS, у рядку background.
Можна легко змінювати форму, колір і розмір підказки, якщо ви хоч трохи знайомі з CSS.

Исходники

Сподіваюся даний вид підказки стане в нагоді вам при роботі з сайтом.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: