Здравствуйте уважаемые начинающие веб-мастера. Продолжаем тему элементы HTML.
По спецификации атрибут data предназначен для внесения служебной инфрмации, которая никому не видна кроме программист, в код элемента, однако у него есть очень интересное свойство.
Синтаксис атрибута:
data-name="Информация".
А вот эффект созданный с помощью атрибута data — Наведите курсор на слово Атрибут в следующей строке.
Атрибут
Вот эти "Атрибут data" и есть текст расположенный в атрибуте data.
Код этого эффекта:
HTML
<div class="lake3" data-title="Атрибут data"> Атрибут</div>
CSS
Делаем позиционирование и выплывание.
.lake3 {
position: relative;
overflow: hidden;
}
.lake3:after {
content: attr(data-title);
position: absolute;
color: #000;
top: 0px;
left: 70px;
transition: transform .4s ease-out;
transform: translateY(-300%) scale(1);
}
.lake3:hover:after {
transform: translateY(-50%) scale(1);
}
Более интересное применение атрибута data можно посмотреть в статье Текст на изображениях, но сперва придётся познакомиться с CSS.
Мета-теги < < < В раздел > > > Атрибут style
