Атрибут data

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем тему элементы HTML.

Атрибут с префиксом data это пользовательский атрибут, которому можно дать любое имя, и поместить в любом html теге.

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

Например, в код изображения можно ввести данные о том, когда и откуда это изображение было загружено.

В код ссылки — описание того места, куда эта ссылка ведёт.

В блочном или строчном элементе можно внести его описание, чтоб только по html коду понять как он выглядит не переходя на страницу или файл стилей.

Синтаксис атрибута:

data-name="Информация".

Однако, data атрибут можно применить для создания очень интересных эффектов на странице.

И вот один такой пример. Попробуйте навести курсор на следующий абзац.

Привет

 

Вот эти "Ещё два привета" и есть текст расположенный в атрибуте data.

Забегая чуть вперёд, привожу код этого эффекта.

HTML

<div class="lake3" data-title="Ещё два привета"> Привет</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 основы. Добавьте в закладки постоянную ссылку.

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

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