2015
7
Июнь

Подписи к изображениям



Подписи к изображениям можно выполнять различными способами, используя hover-эффекты, а также располагая подписи на изображении в различных частях.

Рассмотрим несколько примеров фиксированных надписей к картинкам. Для этого применяем теги <figure> и <figcaption>. С их помощью будем группировать изображения и надписи к ним.



HTML


Для всех примеров разметка HTML примерно одинакова. Тег <figcaption> используется для описания тега <figure> и располагается в записи первым или последним.

Пример 1: <figure> <figcaption> Подпись к изображению... </figcaption> <img src="путь к картинке"> </figure> Пример 2: <figure> <img src="путь к картинке"> <figcaption> Подпись к изображению... </figcaption> </figure>

Расположение подписей и внешний вид будем формировать с помощью таблицы стилей CSS. Для базового контейнера <figure> используем относительное позиционирование position: relative;, для подписей <figcaption>, в случаях с наложением - абсолютное позиционирование position: absolute;.


Основные стили CSS


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

- CSS - /* группируем картинки */ figure { margin: 0px; } /* position: relative; обязательно*/ figure.ink-image { position: relative; border: 1px solid #555; } /* изображения резиновые */ figure.ink-image > img { border: 0px none; width: 100%; vertical-align: top; } /* формируем подписи к картинкам */ figure.ink-image > figcaption { padding: 1em; background: none repeat scroll 0% 0% #FFF; line-height: 1.3; font-family: 'Roboto', sans-serif; font-weight: 400; }

Подпись вверху, перед изображением


Первым элементом здесь надпись перед изображением. Дополнительных стилей не требуется. Обходимся основными свойствами.

Фонтан в парке Куйбышева
- HTML - <figure class="ink-image"> <figcaption> Фонтан в парке Куйбышева </figcaption> <img src="img/fixed-img1.jpg" width="500" height="375"> </figure>

Подпись внизу под изображением


Новостройка. Храм.

Для размещения подписи под изображением, после тега <img> прописываем figcaption& и применяем основные свойства.

- HTML - <figure class="ink-image"> <img src="fixed-img/img/fixed-img2.jpg" alt="" width="500" height="375" /> <figcaption> Новостройка. Храм. </figcaption> </figure>

Подпись на изображении вверху


Памятная доска аллеи городов-героев

Использование надписей на изображении используется довольно часто. Для надписи можно применять определенный фон или без него.

Для данного вида надписи используется класс class="over-top", для прозрачного фона свойство background с применением rgba, полупрозрачность можно создать регулируя альфа-канал от 1 до 0.

- HTML - <figure class="ink-image"> <img src="fixed-img/img/fixed-img3.jpg" alt="" width="500" height="375" /> <figcaption class="over-top"> Памятная доска аллеи городов-героев </figcaption> </figure> - Основные свойства CSS + /* Подпись на изображении вверху */ figcaption.over-top { background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.7); border: medium none; position: absolute; top: 0px; width: 100%; }

Подпись на изображении внизу


Ландыши в лесу

Разница с предыдущим примером только в расположении надписи. Используя абсолютное позиционирование position: absolute; применяем свойство bottom: 0px;, для figcaption применяем класс class="over-bottom".

- HTML - <figure class="ink-image"> <img src="fixed-img/img/fixed-img4.jpg" alt="" width="500" height="375" /> <figcaption class="over-bottom"> Ландыши в лесу </figcaption> </figure>

Подпись по центру на изображении


Трюки на велосипедах

Такой способ очень часто используют при использовании слайдеров или картин. Для figcaption применяем класс class="center"

- HTML - <figure class="ink-image"> <img src="fixed-img/img/fixed-img5.jpg" alt="" width="500" height="375" /> <figcaption class="center"> Трюки на велосипедах </figcaption> </figure> - Основные свойства CSS + /* подпись строго по центру */ figure.ink-image > figcaption.center { background: none; position: absolute; width: 100%; font-family: 'Roboto', sans-serif; font-weight: 900; color: white; text-transform: uppercase; text-align: center; margin: 0; top: 50%; left: 50%; font-size: 2rem; transform: translate(-50%, -50%); }

Надписи с фоновой заливкой


Сосна
Лодка

Подписи можно располагать в разных углах, применяя различную заливку. Размер figcaption соответствует размеру текста с отступами padding: 4px 8px;. Свойства left: и right: располагают надписи в углах. Свойство bottom: позволяет сделать отступ от нижнего края, а top: - от верхнего.

- HTML - <figure class="ink-image"> <img src="fixed-img/img/fixed-img6.jpg" alt="" width="500" height="375" /> <figcaption class="dark"> Сосна </figcaption> </figure> <figure class="ink-image"> <img src="fixed-img/img/fixed-img7.jpg" alt="" width="500" height="375" /> <figcaption class="light"> Лодка </figcaption> </figure> - Основные свойства CSS + /* подпись на тёмном фоне */ figure.ink-image > figcaption.dark { position: absolute; bottom: 10px; left: 10px; background: rgba(0, 0, 0, 0.75); padding: 4px 8px; color: white; margin: 0; font: 14px Sans-Serif; } /* подпись на светлом фоне */ figure.ink-image > figcaption.light { position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.75); padding: 4px 8px; color: black; margin: 0; font: 14px Sans-Serif; }