При написании статей, блогов, учебных пособий, записей в журнале или чего-нибудь еще, вы будете включать изображения, диаграммы, фотографии или даже видео, иллюстрирующее ваше содержание. И скорее всего вы захотите прикрепить подписи к этим изображениям, и, возможно, их номер, чтобы читатели могли следить за своими мыслями. И это именно то, что мы будем сейчас делать, используя элемент <firgue> с помощью CSS.
Рисунок элемента
Элемент <firgue> предназначен для использования вместе с элементом <figcaption> для разметки изображения, иллюстрации, фотографии, диаграммы и фрагмента кода.
Вот основная разметка для firgue:
<figure>
<img src="/image.jpg" alt="" />
<figcaption>Описание для вашего изображения <figcaption>
</figure>
Несколько замечаний относительно фигурного элемента:
- Элемент <figcaption> не является обязательным.
- Вы можете установить только один элемент <figcaption> в элементе <figure>.
- Вы можете вставлять другие элементы, как вы хотите в элементе <figure>.
- Когда вы имеете дело с изображением и включаете <figcaption>, вы можете оставить атрибут alt="" пустым для предотвращения повторного чтения одного и того же контента.
Например, вместо того, чтобы добавлять описание изображений таким образом:
<img src="logowebsite.jpg" alt="студия веб-дизайна и разработок" />
... вы можете сделать что-то вроде этого:
<figure>
<img src="logowebsite.jpg" alt="" />
<figcaption>студия веб-дизайна и разработок<figcaption>
<figure>
Вернемся к нашему делу.
Предположим, мы хотим, чтобы наши изображения были с приставкой "Рис. 1 - ... "," Рис. 2 - ... "и так далее. Для этого сделаем подсказки при помощи псевдо-элементов "до" и "после" (:after, :before). Нумерация будет происходить автоматически. Вам необходимо будет только добавить описание материалов.
article {
counter-reset: figures;
}.figure {
counter-increment: figures;
}.figure figcaption:before {
content: 'Рис. ' counter(figures) ' - ';
}
Теперь, когда мы знаем, как использовать как элемент <figure>, настало время сделать то, что мы собирались: приукрасить наши изображения. Но, прежде чем это делать, сначала надо разместить нумерацию по центру figure, просто добавив класс.
Мы зададим нашим данным некоторые стили для того, чтобы сделать своего рода кадры из изображений.
.figure {
padding: 0.9em;
border: 3px solid #f5bca8;
background: #fff;
margin: 0 auto 1em;
}
Далее, для того, чтобы разместить изображение по центру и предотвратить их выпадение из контейнера (элемент <figure>), нам нужно добавить некоторые правила (может также быть <video> или что-то другое):
.figure img {
margin: 0 auto;
display: block;
max-width: 100%;
}
Теперь надпись:
.figure figcaption {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.8em;
padding: .5em;
text-align: center;
color: #fff;
background: #f5bca8;
}
Отлично!
Нумерация
Мы до сих пор не сделали счетчик нумерации наших изображений. Давайте сделаем. Как мы уже видели в предыдущем разделе, это очень легко сделать.
.article {
counter-reset: figures;
}.figure figcaption {
counter-increment: figures;
}.figure figcaption:before {
content: 'Рис. ' counter(figures) ' - ';
}
Если вы не хотите нумеровать изображения, вы можете применить это к данному классу на родительский элемент. Вы можете сделать свой класс .wrapper .numbered-figures так, что он позволит нумеровать изображения. Это достаточно просто:
.numbered-figures { counter-reset: figures; }
.numbered-figures .figure figcaption { counter-increment: figures; }
.numbered-figures .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; }
Вариации
Ура! У нас есть основы для нашей системы, но мы до сих пор не создали положения figure на странице. Сделаем два класса:
.figure-left {
float: left;
margin: 0 1em .5em 0;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}.figure-right {
float: right;
margin: 0 0 .5em 1em;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
Для тех, кто не знает что такое min-content - это допустимое значение width, min-width, max-width, height, min-height и max-height среди других свойств включают flexbox и структуры сетки.
Поскольку <figure> является блочным элементом, он тянется по ширине его родителя (100%). Мы могли бы установить его в положение float: left или display: inline-block, но если заголовок будет шире чем изображение, у нас могут возникнуть проблемы. Мы могли бы жестко закодировать ширину фигуры в зависимости от изображения, но они тогда не были бы адаптированы. Именно поэтому мы вводим значение min-content. Проще говоря, это элемент <figure>, который служит для того, чтобы уменьшить ширину изображения так, чтобы оно поместилось внутри блока не вылезая за края.
Примечание:
* Это значение так же поддерживается в Firefox (с -moz- префиксом) и Chrome (с -webkit- префиксом).
Существуют и другие значения, аналогичные min-content, такие как max-content, fit-content и available.
И последнее, но не в последнюю очередь, мы должны изменить / удалить максимальное значение ширины на изображениях для положения firgue. Если вы хотите, чтобы изображения имели свой собственный размер, вам необходимо установить максимальную ширину(max-width):
.figure-right img,
.figure-left img {
max-width: 300px; /* Adjust to suit your needs */
}
@media запросы
Чтобы убедиться, что float figure выглядят корректно на маленьких экранах, мы должны переделать несколько стилей, чтобы сделать их во всю ширину и разместить горизонтально по центру:
@media (max-width: 767px) {
.figure-left,
.figure-right {
float: none;
margin: 0 0 1em 0;
width: 100%;
}.figure img {
max-width: 100%;
}
}
В итоге у нас получилось три вида положения разметки: центральная, левая и правая.
<figure class='figure'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>
<figure class='figure figure-left'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>
<figure class='figure figure-right'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>
На этом всё!
Единственное, что осталось сделать, это осуществить это на Вашем сайте. Пожалуйста, обратите внимание на страничку в разделе Манйкрафт, чтобы увидеть, как выглядит подобная нумерация.
Спасибо за чтение и счастливого кодирования!
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 1 | |
Ангелина Ионова 9 @Angelina 06/12/2016 12:521
+1
материал
| |