Атрибут data и его очень интересные свойства

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем тему элементы 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

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.
А так же:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *