Что такое figure в html
Элементы figure и figcaption
Перевод: Влад Мержевич
Элемент
Элемент figure представляет собой самодостаточный блок контента с возможным заголовком, на который, как правило, ссылаются из основного потока документа. Этот блок может быть перемещён из основного потока документа без потери общего смысла документа.
Элемент
Элемент figcaption представляет собой заголовок или легенду для figure.
Использование и
Мы узнали, что спецификация говорит об этих элементах. Но как их использовать? Давайте взглянем на несколько примеров.
с изображением
с изображением и заголовком
Изображение внутри элемента с поясняющим заголовком.
Нахальная макака. Река Нижняя Кинтаганбан, Борнео. Источник: Ричард Кларк
И код, который мы использовали.
с несколькими изображениями
Несколько изображений внутри одного с единым заголовком.
Австралийские птицы. Слева направо: кукабурра, пеликан и многоцветный лорикет.
Источник: Ричард Кларк
с блоком кода
Элемент может также применяться для примеров кода.
Различие между и
Мы рассмотрели в предыдущей статье и важно отметить различие между двумя этими элементами. Выбирая между и вы должны спрашивать себя, является ли содержание важным для понимания раздела.
С учётом этого, если положение элемента связано с предыдущим и последующим содержанием, то воспользуйтесь более подходящим элементом, например,
и, возможно даже, в зависимости от его содержимого.
Не останавливаться на достигнутом!
Нет необходимости ограничивать ваши изображениями и примерами кода. Другое содержимое вполне подходит для использования, включая аудио, видео, графики (возможно, с использованием или ), стихи или таблицы со статистикой.
Резюме
Как мы показали в этой статье, у элемента есть множество возможностей, помните, что это наиболее подходящий элемент для работы. И вы уже используете его во всех своих макетах, на так ли?
Примеры использования html-тегов figure и figcaption
HTML-теги figure и figcaption появились в стандарте HTML5 для формирования блока с картинкой и описания к ней. Кроме того, эти теги можно применять для оборачивания блоков кода, рекламы, видео или аудио.
Стандартный вид использования этих тегов таков:
Поэтому мы можем несколько изменить форматирование нашего блока, определив дополнительные ccs-правила для тегов и :
После этого получим уже другой вид той же картинки. Стало намного симпатичней, не так ли?
Эффект увеличения картинки при наведении на figure
Сам пример с увеличивающейся картинкой и появляющимся описанием выглядит так:
Пример использования тегов figure и figcaption для форматирования элементов code и pre
Кроме применения этих тегов в качестве обертки для картинок, можно использовать их для:
— блочных цитат
— блоков кода
— аудио
— видео
— рекламных объявлений
Рассмотрим пример, который демонстрирует код на JavaScript (используются теги Пример кода на JavaScript для обработки события клика на кнопку и случайного изменения цвета фона для body
Примеры форматирования изображений с помощью html-тегов figure и figcaption с Codepen
Пример очень симпатичного оформления профиля актера, автора статьи или пользователя
Описание изображения в виде меток
Простая фотогалерея с описаниями
Пример форматирования галереи изображений
Фотогалерея с данными об авторе, просмотрах и загрузках
Пример мини-слайдера
Фотогалерея с перемещением картинок
Фотогалерея на основе Grid
В этой фотогалерее интересно размещение разных по размеру фото по сетке за счет использования модели Grid. Также здесь использован hover-эффект с всплывающим описанием, немного повернутым за счет использования свойства transform: rotate().
See the Pen Figure + Figcaption by Ryan Mulligan (@hexagoncircle) on CodePen.18892
Слайдер на основе тегов figure и figcaption
Мини-фотогалерея с эффектом печатания текста
Пример, демонстрирующий изменение контента при наведении на фото
Пример изображения с выезжающим описанием
При клике на кнопку More описание, размещенное в коде в теге выезжает вверх. В примере использован svg с фильтром и немного JS-кода на основе jQuery.
Описание на обороте изображения
В этом примере для того, чтобы прочитать полное описание фото, необходимо нажать на кнопку Read the back, после чего фото повернется к нам своей «обратной стороной». В коде использованы 3D трансформации и JavaScript.
Описание, появляющееся при наведении курсора мыши на фото
Анимированное исчезновение описания картинки
Исчезающее описание
Еще один вариант кода, который не показывает, а наоборот, убирает figcaption для изображения. Очень приятный hover-эффект, в котором при наведении курсора мыши на картинку описание как бы прячется под нее. Используется jQuery и TweenMax.
Эффект разрезанного изображения
За счет использования ряда элементов
Анимация при наведении на логотипы
В примере использованы свойства CSS,которые анимируют SVG-изображение при наведении на круг.
Несколько интересных hover-эффектов со при наведении на изображение от одного автора
Описание появляется на красном фоне, состоящем из полупрозрачных треугольников.
Используем белые треугольники для отображения описания.
Изображения находятся в кругах и при наведении меняются на иконку. CSS + небольшой код на jQuery.
Описание появляется в виде белого прямоугольника. CSS + небольшой код на jQuery.
Эффект появления описания в анимированных черных прямоугольниках.
Хороший вариант для сайта художников, фотографов или модельеров.
Отличный вариант анимированных описаний на разноцветных фонах с использованием css-переменных.
Интересный эффект для блока с командой. Изображение прявляется при наведении. CSS + небольшой код на jQuery.
Еще один вариант оформления блока с командой, хотя это и не очень понятно по виду изображений. CSS + небольшой код на jQuery.
Лаконичное описание команды.
Следующий пример можно использовать для вывода профиля пользователя.