Как сделать подпись под картинкой в css
Перейти к содержимому

Как сделать подпись под картинкой в css

  • автор:

Подпись картинки (теги figure и figcaption) | HTML

Внимание! Статья на переработке. Прежний вариант был перенесён сюда в связи с более подходящим заголовком.

Как сделать надпись под картинкой

котёнок мечтает стать львом

Кроме содержания атрибутов alt и title при поиске по картинкам используются тексты, находящиеся в непосредственной близости от изображения. Часто это выглядит как:

резинового дизайна -->  
котёнок мечтает стать львом
Когда-нибудь котёнок выберется из лужи

Автоматическая нумерация картинок

body < counter-reset: figures; >figure.img figcaption < counter-increment: figures; >figure.img figcaption:before

Изображение с подписью в рамке

Общий CSS стиль:

 figure.img < max-width: 100%; margin: 0 auto; box-shadow: 0 0 0 5px #fff, 0 0 4px 5px; /* рамка (она же отступ и тень) блока */ > figure.textizo < width: fit-content; /* ширина блока (рисунок+описание) = ширине описания или фото, в зависимости от того, чьё значение больше; нужен -moz- и -webkit- */ > figure.izo < width: min-content; /* ширина блока (рисунок+описание) = ширине изображения; нужен -moz- и -webkit- */ > figure.img img < display: block; max-width: 100%; height: auto; margin: 0 auto; >figure.img figcaption

котёнок мечтает стать львом

Текст длиннее изображения. Если картинка располагается по центру, то хочется использовать всё пространство родительского блока.

textizo"> котёнок мечтает стать львом
Когда-нибудь котёнок выберется из лужи

котёнок мечтает стать львом

Когда нужно чтобы ширина контейнера была не больше ширины картинки (для Google Chrome см. код ниже, для него нужно обязательно указывать width для figcaption ?!).

izo"> котёнок мечтает стать львом
Когда-нибудь котёнок выберется из лужи

Если изображение узкое и маленькое и обтекается слева или справа, а текст длинный, то следует ограничить ширину описания.

izo">
style="width: 300px;">Длинное, очень длинное, длинное-предлинное описание

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

К CSS выше добавить:

figure.hover < position: relative; >figure.hover figcaption < position: absolute; left: 0; top: calc(100% + 5px); width: available; /* 100% минус горизонтальные margin, border и padding; нужен -moz- и -webkit- */ visibility: hidden; background: #fff; box-shadow: 0 0 0 5px #fff, -5px 0 4px, 5px 0 4px, 0 5px 4px; > figure.hover:hover figcaption

котёнок мечтает стать львом

hover"> котёнок мечтает стать львом302">
style="width: 302px;">Когда-нибудь котёнок выберется из лужи

Несколько фотографий и одно описание

котёнок мечтает стать львом

Про тег figure и figcaption хорошо написано у html5doctor.com: статья 1 (в комментариях тоже можно найти интересные моменты), статья 2, а также следует прочитать первоисточник w3.org. Словом, так тоже будет верно: Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу

 figure.img < max-width: 100%; >figure.izo < width: min-content; margin: 0 auto; >figure.tri figure < width: 100%; margin: 0; letter-spacing: 6px; white-space: nowrap; >figure.img img < height: auto; margin: 0 auto; >figure.tri img < display: inline-block; max-width: calc(100%/3 - 4px); /* с учётом того, что фото одинаковой ширины, иначе JavaScript */ > figure.img figcaption 
котёнок мечтает стать львом гадкий утёнок смотрит в лоханку гадкий утёнок смотрит в воду, он стал лебедем
Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу

Появление подписи картинки при наведении на неё курсора мышки

пока оно в этой статье Всякие эффекты для вдохновения: 1, 2, 3, 4, 5

14 комментариев:

Анонимный есть ли возможность автоматом проставлять теги alt и title для изображений в блоггере ? NMitra Я такого способа не знаю и поскольку всё равно пишу всё на вкладке «Изменить HTML», то добавление alt не вызывает у меня неудобства. Любопытно то, что в нескольких местах шаблона, например, в заголовке при использовании изображения, всё же данный атрибут применяется. Анонимный Хм, а если изображений 10-к или более на статью? Жуть. Раньше мне было все равно, но недавно стал юзать фоторекламу на блоге.
Жаль что этого не хотят решить разработчики Блоггера. NMitra Вот у меня тоже такое впечатление, что именно не хотят, а не не могут. Поскольку некоторые другие функции, которые добавленные в блог, удивляют. Анонимный 1 Olga Я сделала шапку блога в xHeader,картинку (часть картинки)я взяла на бесплатных изображениях,т.е.мне ее прописывать не надо. Как правильно записать HTML код, как будут просаны теги alt и title NMitra Если вы про http://3.bp.blogspot.com/-pI5NALFNY14/T0jg92DlVrI/AAAAAAAAAGg/QgQrIsLaKns/s1600/suberb%2B2%2B%25D1%2588%25D0%25B0%25D0%25BF%25D0%25BA%25D0%25B0%2B%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%25D0%25B0%2B2.jpg , то она является фоновым изображением, прописана через стили, alt и title не требуются. Svetlana Kuzmina Добрый день! Я только начинающий блоггер, подскажите, пожалуйста, КАК сместить картинку в заголовке блога, чтобы она была СПРАВА? Заранее спасибо за помощь!
http://stylistjournal.blogspot.ru/ NMitra Добрый день. Справа от чего? Картинку нужно ужать?
Svetlana Kuzmina Наталья, спасибо, разобралась. Irina Sanirio Хочу, чтобы все изображения в блоге имели простую рамку с тенью и подпись находилась в рамке. Скопировала первый код из «Изображение с подписью в рамке», вставила в шаблон (в CSS). Не работает. NMitra То что в style — эту часть нужно вставить туда где CSS.
А ниже, после
,включительно, это нужно добавлять в тело сообщения на вкладке HTML.

Сначала потренируйтесь, весь код целиком добавьте в сообщение на вкладке HTML.

Я пишу всю статью с включенным режимом HTML, мне не составит труда пару строк. А вам не думаю, что будет сподручно каждый раз переключаться. BUTAMUHbI4 «Когда-нибудь котёнок выберется из лужи». Тут смысл более широкий, чем кажется на самом деле. Образы слов следующие:

«котёнок» — это ребёнок, а в некоторых случаях и более объемлющее значение: человек.
«лужа» — это психологические (и только, т.к. всё остальное пляшет от психики человека) рамки, в которые загоняют котёнка с момента его появления на свет (и хуже всего то, что в большей степени это делают его родители на подсознательном уровне, т.к. сами росли в таких же рамках).

Отсюда рождается следующее:
Зачем загонять котёнка в лужу самОй постановкой изначального предложения? Ведь даже неоднозначное наречие «когда-нибудь» уже внедряет в подсознание котёнка возможность «вечного» пребывания в луже, т.к. есть вариант, что «когда-нибудь» никогда не случится (котёнок может просто умереть несколько раньше)..

ПС: это я так, лирика..)) NMitra 🙂

Каскадные таблицы стилей CSS советы & приёмы

Эйфелева башня

Например, чтобы сместить изображение вправо на расстояние, равное 30% от ширины окружающих абзацев, используйте следующие правила:

figure

На самом деле, действительно необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.

Масштабирование изображения

Здесь только одна проблема, и она заключается в том, что изображение может быть слишком широким. В этом случае, ширина изображения всегда будет составлять 136 px и иллюстрация будет занимать 30% от окружающего текста. И если вы сузите окно, то изображение может не поместиться и вылезти за рамку (попробуйте!).

Если вы знаете ширину всех изображений в документе, вы можете указать минимальную ширину иллюстрации следующим образом:

figure

Сен-Тропе

 

class=scaled src="https://www.w3.org/Style/Examples/007/st-tropez.jpg" alt="Сен-Тропе">

Сен-Тропе и его форт в вечернем солнце

А вот таблица стилей:

figure < float: right; width: 30%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; border: thin silver solid; margin: 0.5em; padding: 0.5em; >img.scaled

И в дополнение последнее правило: этот приём делает изображение настолько широким, насколько позволяет пространство внутри иллюстрации (область внутри рамок и отступов — border и padding).

Размещение подписи сверху

Кап Ферра

HTML позволяет элементу figcaption быть либо первым, либо последним элементом внутри иллюстрации. Если не применять каких-либо правил CSS, это приведёт к тому, что подпись будет размещена либо над иллюстрацией, либо под ней соответственно.

Однако, независимо от разметки текста, вы можете указать в CSS, чтобы подпись появилась либо над изображением, либо под ним. Этого можно достичь, указав браузеру, что изображение должно быть отформатировано как таблица, в которой картинка является единственной ячейкой, а подпись становится заголовком таблицы. Просто добавьте эти правила в таблицу стилей из предыдущей секции:

figure < display: table; >figcaption

Стиль, который мы использовали на этой странице, содержит рамку серого цвета. Она обрамляет иллюстрацию. К сожалению, когда мы используем табличную разметку, чтобы поместить подпись сверху или снизу, мы должны указать рамку другим способом, потому что подпись размещена за пределами границы таблицы. Мы можем исправить это, поместив часть границы на саму подпись:

figure < border-top: none; padding-top: 0; >figcaption

Иллюстрации & подписи в HTML4

Эйфелева башня

Масштабированная модель Эйфелевой башни в Парке Мини-Франция

HTML4, в отличие от HTML5, не имеет элементов, которые бы позволили вставить в документ изображение с подписью. Это предлагалось сделать (см HTML3), но в итоге в HTML4 предложение не вошло. Вот единственная возможность воспроизвести элемент figure:

Масштабированная модель Эйфелевой башни в Парке Мини-Франция

Затем в таблице стилей вы используете класс «figure» для форматирования иллюстрации так, как вам необходимо. Например, чтобы сместить иллюстрацию вправо на расстояние, равное 30% от ширины окружающих абзацев, необходимо применить следующие правила:

div.figure

Как и ранее, необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.

Масштабирование изображения в HTML4

Чтобы избежать выхода изображения за рамки иллюстрации и при условии, что вы знаете ширину всех изображений в документе, вы можете добавить минимальную ширину DIV следующим образом:

div.figure

Сен-Тропе и его форт в вечернем солнце

Чтобы смасштабировать изображение на всю ширину иллюстрации (как мы сделали с изображением справа), вы можете добавить атрибут КЛАССА и соответствующее правило CSS, очень похожее на пример с HTML5 выше. Вот разметка, которую мы использовали:

Сен-Тропе

Сен-Тропе и его форт в вечернем солнце

А вот таблица стилей:

div.figure < float: right; width: 30%; border: thin silver solid; margin: 0.5em; padding: 0.5em; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; >img.scaled

Одно дополнение: этот приём делает изображение настолько широким, насколько позволяет DIV (площадь внутри border и padding).

Размещение описания сверху в HTML4

Кап Ферра

Средиземное море около Кап Ферра

Чтобы разместить подпись сверху, добавьте эти правила в таблицу стилей из предыдущих секций:

div.figure < display: table; >div.figure p + p

‘+’ приводит к тому, что правило действует на элемент P, который следует за другим P. Что означает, что условие действует на второй элемент P иллюстрации, который содержит описание картинки.

(Эта техника может привести к ошибкам в некоторых браузерах, разработанных ранее 2003, особенно в комбинации с масштабированием изображений, как в примере выше)

Как и прежде, серая рамка, которую мы выбрали для обрамления иллюстраций на этой странице, будет обрамлять только само изображение. Чтобы рамка была вокруг изображения и подписи, добавьте эти правила:

div.figure < border-top: none; padding-top: 0; >div.figure p + p

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 17 January 2001;
Last updated Ср 06 янв 2021 05:40:49

Как добавить подпись под фотографией?

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

Решение

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

Чтобы связать фотографию и подпись к ней воедино, их следует поместить в один блок и присвоить ему имя класса, к которому будут применяться стилевые параметры. Такой блок можно выравнивать по правому или левому краю, добавляя стилевое свойство float со значением right или left , а также задавать цвет фона и параметры рамки (пример 1).

Пример 1. Подпись под фотографией

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Подрисуночная подпись  
Похожие публикации:
  1. Как вставить svg в css background image
  2. Как получить посылку aliexpress
  3. Как сделать темную тему idle python
  4. Какую скидку дает эльдорадо по утилизации

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

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