Анімовані підказки для елементів тексту і посилань з допомогою властивостей CSS3

83

Анимированные подсказки для элементов текста и ссылок с помощью свойств CSS3

Доброго дня всім!
Підказки для посилань, або ж елементів тексту завжди виглядають привабливо, так і користувачеві підказки часом полегшують розуміння того що він взагалі хоче отримати відвідавши той чи інший сайт. Підказки бувають різні і за формами і за виконанням, із застосуванням картинок в оформленні, які працюють на javascript, навіть говорять з програванням музики. Варіантів багато і всі вони по своєму гарні, тут вже справа смаку.

Сьогодні я хочу розповісти і показати вам, як використовуючи чудові властивості CSS3, без застосування додаткових картинок і javascript, можна створити прості і привабливі анімовані підказки до елементів тексту або посилання. В роботі ми будемо використовувати виключно чистий стиль(функції) CSS3.

І так, почнемо!

Спочатку ми розглянемо можливість виведення підказок для окремих уривків(елементів) тексту. Припустимо у нас є якийсь текст, в якому до якоїсь речі, або фрагментом потрібно дати пояснення у вигляді підказки.

Для початку весь текст необхідно помістити в контейнер використовуючи блоковий елемент тегу div присвоївши йому class=”content”, уривок тексту з підказкою помістимо між тегами і . Саму підказку облачим тегом , тим самим додамо курсивне накреслення тексту підказки, ну і в CSS3 він нам буде служити напрямною для оформлення і виведення самої підказки.

В HTML це буде виглядати приблизно так:

<div class="content">Я не люблю недільні вечори. Час розбитих надій і <span>втрачених ілюзій<i>Дощ не може йти вічно</i></span>. Всі вихідні чекаєш світлого майбутнього, а приходить понеділок.</div>

Я не люблю недільні вечори. Час розбитих надій і втрачених иллюзийДождь не може йти вічно. Всі вихідні чекаєш світлого майбутнього, а приходить понеділок.
Я не люблю недільні вечори. Час розбитих надій і втрачених иллюзийДождь не може йти вічно. Всі вихідні чекаєш світлого майбутнього, а приходить понеділок.

Крок другий: CSS

Перейдемо безпосередньо до стилів наших підказок через властивості CSS.
По-перше визначимо стиль для видимого елемента нашої підказки:

.content span {
background:#eee;
 border:1px solid #444;
 cursor:pointer;
display:inline-block;
outline:none;
padding:0 5px;
position:relative;
text-decoration:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}

.content span {
background:#eee;
border:1px solid #444;
cursor:pointer;
display:inline-block;
outline:none;
padding:0 5px;
position:relative;
text-decoration:none;-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}

А тепер оформимо зовнішній вигляд і приховування плаваючої області підказки :

.content span i {
visibility:hidden;
border:1px solid #444;
 bottom:60px;
left:50%;
margin-left:-110px;
opacity:0;
padding:10px;
position:absolute;
width:200px;
z-index:99;
background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-color: #eee;

-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.content span:hover i {
bottom:30px;
opacity:0.95;
visibility:visible;
}

.content span i {
visibility:hidden;
border:1px solid #444;
bottom:60px;
left:50%;
margin-left:-110px;
opacity:0;
padding:10px;
position:absolute;
width:200px;
z-index:99;background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
background-color: #eee;-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;-webkit-transition:all 0.3 s ease-in-out;
-moz-transition:all 0.3 s ease-in-out;
-o-transition:all 0.3 s ease-in-out;
-ms-transition:all 0.3 s ease-in-out;
transition:all 0.3 s ease-in-out;
}
.content span:hover i {
bottom:30px;
opacity:0.95;
visibility:visible;
}

Це ще не все, було б безглуздо залишати підказці однотипний зовнішній вигляд і колірну гамму, так що можна трохи попрацювавши надати незвичайні форми і різні кольори нашими підказками.

Це підказка №1Подсказка номер один Фон може бути красныйПодсказка №1 – червоний колір зеленыйПодсказка №1 – зелений колір і синийПодсказка №1 – синій колір


Це підказка №2Подсказка номер два Фон може бути красныйПодсказка №2 – червоний колір зеленыйПодсказка №2 – зелений колір і синийПодсказка №2 – синій колір


Це підказка №3Подсказка номер три Фон може бути красныйПодсказка №3 – червоний колір зеленыйПодсказка №3– зелений колір і синийПодсказка №3 – синій колір


Це підказка №4Подсказка номер чотири Фон може бути красныйПодсказка №4 – червоний колір зеленыйПодсказка №4 – зелений колір і синийПодсказка №4 – синій колір


В HTML все це дійство буде виглядати приблизно так:

<div class="demo_content">
<p>Це <span>підказка №1<i class="v1">Підказка номер один</i></span> Фон може бути <span class="r">червоний<i class="v1">Підказка №1 – червоний колір зеленыйПодсказка №1 – зелений колір і синийПодсказка №1 – синій колір

<hr /> Це <span>підказка №2<i class="v2">Підказка номер два</i></span> Фон може бути <span class="r">червоний<i class="v2">Підказка №2 – червоний колір зеленыйПодсказка №2 – зелений колір і синийПодсказка №2 – синій колір <hr /> Це <span>підказка №3<i class="v3">Підказка номер три</i></span> Фон може бути <span class="r">червоний<i class="v3">Підказка №3 – червоний колір зеленыйПодсказка №3– зелений колір і синийПодсказка №3 – синій колір <hr /> Це <span>підказка №4<i class="v4">Підказка номер чотири</i></span> Фон може бути <span class="r">червоний<i class="v4">Підказка №4 – червоний колір зеленыйПодсказка №4 – зелений колір і синийПодсказка №4 – синій колір <hr /></div>

Це підказка №1Подсказка номер один Фон може бути красныйПодсказка №1 – червоний колір зеленыйПодсказка №1 – зелений колір і синийПодсказка №1 – синій колір


Це підказка №2Подсказка номер два Фон може бути красныйПодсказка №2 – червоний колір зеленыйПодсказка №2 – зелений колір і синийПодсказка №2 – синій колір


Це підказка №3Подсказка номер три Фон може бути красныйПодсказка №3 – червоний колір зеленыйПодсказка №3– зелений колір і синийПодсказка №3 – синій колір


Це підказка №4Подсказка номер чотири Фон може бути красныйПодсказка №4 – червоний колір зеленыйПодсказка №4 – зелений колір і синийПодсказка №4 – синій колір


Ось і все, проробивши всі ці нехитрі маніпуляції і рухи тіла, ті кому це треба, отримають чудові анімовані підказки на свій сайт або блог.

Ну, а поки — поки!