Вы здесь: Главная » CSS » Примеры использования html-тегов figure и figcaption

Примеры использования html-тегов figure и figcaption

HTML-теги figure и figcaption появились в стандарте HTML5 для формирования блока с картинкой и описания к ней. Стандартный вид использования этих тегов таков:

Random Image
Random Image

На первый взгляд, ничего особенного, и можно было бы обойтись и без этих тегов, воспользовавшись для формирования блока div-ами. Давайте для начала заглянем в код и посмотрим, к каким тегам - блочным или строчным - они относятся. Инспектор свойств (F12, или CTRL + SHIFT + I) показывает нам, что и <figure>, <figcaption> - это блочные теги:

Свойства тега figure Свойства тега figcaption

Поэтому мы можем несколько изменить форматирование нашего блока, определив дополнительные ccs-правила для тегов <figure> и <figcaption>:

После этого получим уже другой вид той же картинки. Стало намного симпатичней, не так ли?

Random Image
Random Image

Эффект увеличения картинки при наведении на figure

Давайте усложним код, добавив эффект увеличения изображения при наведении на figure. Используем для этого свойство transform: scale(). Кроме того, спрячем изначально подпись под изображением в теге figcaption, добавив ему свойство opacity: 0, и увеличим это свойство до 1 при наведении на figure. Для плавности добавим анимацию типа transition. В результате получим такой код:

В коде для тега figure задан атрибут id="figure-hover". Это сделано для создания различия в примерах, хотя при наличии у вас единственного тега figure на странице или в случае форматирования всех таких тегов в соответствии с приведенным выше кодом необязательно.

Сам пример с увеличивающейся картинкой и появляющимся описанием выглядит так:

 Night and snow
Night and snow - Image by id #232 from picsum.photos

Как вы, должно быть, догадались, это далеко не все, что можно сделать с тегами <figure> и <figcaption>, используя различные правила css. Поэтому давайте рассмотрим ряд примеров с Codepen, которые раскрывают возможности этих тегов, используя намного больше свойств CSS.

Примеры форматирования изображений с помощью html-тегов figure и figcaption с Codepen

Прежде, чем решить, использовать вам теги figure и figcaption в оформлении страниц, вы можете посмотреть, каким образом они были оформлены в примерах на популярном ресурсе codepen.io. Авторы примеров используют в своем коде не только привычную разметку в html и описание свойств в css , но и различные препроцессоры, такие, как Haml, Pug или SCSS. Если код на вкладках для вас непонятен, перейдите по ссылке Edit on Codepen Edit on Codepen и выберите в меню справа на нужной вкладке View Compiled HTML (Показать скомпилированный HTML) или View Compiled CSS (Показать скомпилированный CSS).
Показать скомпилированный html
Показать скомпилированный css

Пример очень симпатичного оформления профиля актера, автора статьи или пользователя

Используем псевдоклассы ::before и ::after для figure

See the Pen Realistic Polaroid Figures by Kyle Foster (@hkfoster) on CodePen.18892

Автор Kyle Foster

Описание изображения в виде меток

Очень интересный вариант использования тега figcaption для создания меток показан в примере ниже. Для этого figcaption содержит внутри несколько вложенных div-ов, причем и сам figcaption , и div-ы внутри него имеют абсолютное позиционирование с разными координатами. В зависимости от размера экрана длина выносной линии для меток изменяется с помощью css-переменной --label-length.

See the Pen Responsive image labels #CodePenChallenge cpc-figures by Stephen Lee (@abcretrograde) on CodePen.18892

Автор Stephen Lee

Простая фотогалерея с описаниями

В этом примере текст из описания (<figcaption>) разбит на 2 строки и выведен поверх фото, размещенного в теге <img>. Просто и приятно.

See the Pen Image-Gallery with caption - html5-Tag, figure figcaption - responsive by Elen (@ambassador) on CodePen.18892

Автор lck

Пример форматирования галереи изображений

Галерея изображений, основанная на использовании свойств Flexbox-модели для размещения фото в 3 колонки и на использовании тегов  <figure> и <figcaption> для отображения изображений и описания к ним. Обратите внимание, что внутри figcaption размещены 2 div-a: один для названия изображения, второй - для имени автора этого изображения.

See the Pen Figure & Figcaption: #codepenchallenge by miazura (@miazura) on CodePen.18892

Автор miazura

Фотогалерея с данными об авторе, просмотрах и загрузках

Еще один вариант фотогалереи позволяет на больших экранах увидеть в теге <figcaption> только название фото, а при наведении курсора мыши на картинку -   данные об авторе , просмотрах и загрузках. На экранах  менее 700px все эти данные отображаются сразу. В примере использованы анимации типа transition.

See the Pen Figure & Figcaption #CodePenChallenge by Yanely Ramirez (@yxnely) on CodePen.18892

Автор Yanely Ramirez

Пример мини-слайдера

В этом примере изображений, размещенных в тегах figure и снабженных figcaption, можно просмотреть при скролле страницы вправо за счет использования grid-контейнера. Здесь использован небольшой JS-код на основе библиотеки RELLAX.

See the Pen Parallax image gallery using Figure & Figcaption - #CodePenChallenge by Booligoosh (@Booligoosh) on CodePen.18892

Автор Booligoosh

Фотогалерея с перемещением картинок

Пример организации страницы с анимированной прокруткой изображений за счет использования свойства @keyframes и css-трансформации translate3d. В теге <figcaption> размещен заголовок h3 с абсолютным позиционированием и свойством mix-blend-mode: screen.

See the Pen Figure & Figcaption CodePenChallenge by Elen (@ambassador) on CodePen.18892

Автор parph

Фотогалерея на основе Grid

В этой фотогалерее интересно размещение разных по размеру фото по сетке за счет использования модели Grid. Также здесь использован hover-эффект с всплывающим описанием, немного повернутым за счет использования свойства transform: rotate().

See the Pen Figure + Figcaption by Ryan Mulligan (@hexagoncircle) on CodePen.18892

Автор Ryan Mulligan

Слайдер на основе тегов figure и figcaption

В этом примере слайдер организован на основе вложенных тегов figure и figcaption, а также анимации с помощью css-свойств @keyframes и animation.

See the Pen slider(pure css/html) figure & figcaption by Sahebt Alezar (@Sahebt_Alezar) on CodePen.18892

Автор Sahebt Alezar

Мини-фотогалерея с эффектом печатания текста

Фото загружается с анимацией небольшого покачивания. При наведении на изображение мы видим, как печатается текст, размещенный в теге figcaption. Для этого используется JavaScript-код на основе jquery.js.

See the Pen Kandinsky. Typing Effect #codepenchallenge by Natalia Kuznetsova (@lindenalee) on CodePen.18892

Автор Natalia Kuznetsova 

Пример, демонстрирующий изменение контента при наведении на фото

Используем псевдоклассы ::before и ::after для figure, а также абсолютное позиционирование и анимацию типа transition при наведении курсора на блок с фотографией, причем фото загружается не в теге <img>, а с помощью css-свойства background-image для figure.

See the Pen A <figure> with a <figcaption>... and .date that all:hovers by Elen (@ambassador) on CodePen.18892

Автор Joshua Ward

Пример изображения с выезжающим описанием

При клике на кнопку More описание, размещенное в коде в теге <figcaption> выезжает вверх. В примере использован svg  с фильтром и немного JS-кода на основе jQuery.

See the Pen Figure & Figcaption (CSS only version) by Tobias Glaus (@tobiasglaus) on CodePen.18892

Автор  Tobias Glaus

Описание на обороте изображения

В этом примере для того, чтобы прочитать полное описание фото, необходимо нажать на кнопку Read the back, после чего фото повернется к нам своей "обратной стороной". В коде использованы 3D трансформации и JavaScript.

See the Pen Lazy Loading Fig+Figcaption & Flipping Card by Alex Paul (@alex_paul) on CodePen.18892

Автор  Alex Paul

Описание, появляющееся при наведении курсора мыши на фото

Решение на чистом CSS:  мы видим изначально над изображением текст из абзаца, размещенного непосредственно в теге figure,  а полное описание из  тега figcaption читаем после наведения на фото. Эффект появления основан на абсолютном позиционировании, а также на использовании свойства transform и transition.

See the Pen Figure & Figcaption #codepenchallenge by Elise (@Elisse) on CodePen.18892

Автор  Elise

Анимированное исчезновение описания картинки

В этом примере внутри тега <figcaption> текст разбит на несколько span-ов, которые визуально размещены вверху и внизу картинки при загрузке страницы за счет абсолютного позиционирования. При наведении курсора мыши они скрываются за счет использования css-свойств animation и @keyframes. В коде использованы переменные css.

See the Pen Playful CSS figure & figcaption by Piotr Galor (@pgalor) on CodePen.18892

Автор Piotr Galor 

Исчезающее описание

Еще один вариант кода, который не показывает, а наоборот, убирает figcaption для изображения. Очень приятный hover-эффект, в котором при наведении курсора мыши на картинку описание как бы прячется под нее. Используется jQuery и TweenMax.

See the Pen Playful Figure/Figcaption | #CodePenChallenge by Isman Fromes (@ismanfromes) on CodePen.18892

Автор Isman Fromes

Эффект разрезанного изображения

За счет использования ряда элементов <div class='captures'>, css-свойства clip-path и css-фильтра filter: grayscale(50%) изначально мы видим картинку внутри тега <figure> в виде набора вертикальных полос. При наведении курсора мыши изображение становится цельным, цветным, и появляется его описание в теге <figcaption>.

See the Pen #CodePenChallenge Figure & Figcaption by Elen (@ambassador) on CodePen.18892

Автор Artem

На основе статьи 20 HTML <figure> & <figcaption> with CSS.

 

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

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