Автоматическая нумерация изображения с помощью CSS счётчиков

В этом уроке мы затронем тему CSS счётчиков, поговорим о том, как можно организовать автоматический подсчёт графических элементов веб страницы.

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

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

Сегодня мы посмотрим на то, как это возможно реализовать: воспользуемся CSS счётчиками для подписи элементов <figure>.

Элемент figure

Элемент <figure> используется в связке с элементом <figcaption> для маркировки иллюстраций, изображений и фотографий.

Пример использования элемента <figure>:

<figure>
    <img src="/path/to/your/image.jpg" alt="" />
    <figcaption>Here is the legend for your image<figcaption>
</figure>

Вот несколько заметок, касающихся данного элемента:

  • Элемент <figcaption> не обязателен;
  • Вы можете использовать только один <figcaption> в элементе <figure>;
  • Вы можете вписывать сколько угодно элементов в <figure>;
  • При использовании изображения с <figcaption> атрибут alt можете оставить пустым, чтобы не дублировать описание изображения.

Примеры

Если вы хотите показать кусок кода, то это можно сделать так:

<figure>
    <code>body { background: white; }</code>
    <figcaption>Some illustrated code with figure<figcaption>
</figure>

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

<img src="/cute-kitty.jpg" alt="This is a cute kitty!" />

… можете воспользоваться следующим видом записи:

<figure>
    <img src="/cute-kitty.jpg" alt="" />
    <figcaption>This is a cute kitty!<figcaption>
<figure>

Браузерная поддержка

Элемент <figure> относится к категории новых элементов HTML5, а это значит, что старыми браузерами (включая IE8) он не поддерживается.

CSS счётчики

CSS счётчики - это, наверное, одна из самых не освещённых тем CSS. Благодаря ним, мы можем автоматически подсчитывать количество элементов без использования HTML или JavaScript.

Работа счётчиков базируется на:

  • counter-reset - используется для инициализации и сброса одного или нескольких счётчиков;
  • counter-increment - для увеличения значения одного или нескольких счётчиков;
  • counter() - принимает название счётчика для отображения его значения. Используется при работе с псевдо-элементами :before и :after.

Наиболее простой способ использования CSS счётчика:

/* 1. Мы инициализируем счётчик */
body {
    counter-reset: myAwesomeCounter;
}

/* 2. При использовании данного элемента, увеличиваем счётчик */
.myAwesomeElement {
    counter-increment: myAwesomeCounter;
}

/* 3. Отображаем значение счётчика перед элементом */
.myAwesomeElement:before {
    content: counter(myAwesomeCounter);
}

Примеры

В нашем примере мы хотим перед каждым изображением вставлять что-то типа: “Fig. 1 - ...”, “Fig. 2 - ...”, … Реализуется это очень просто:

.article {
    counter-reset: figures;
}

.figure {
    counter-increment: figures;
}

.figure figcaption:before {
    content: 'Fig. ' counter(figures) ' - ';
}

Этого достаточно, чтобы подсчёт производился автоматически. Не круто ли?

Собираем всё в кучу

Основа

Теперь вы знаете, как работать с элементом <figure> и CSS счётчиками, так что можем приступить к делу.

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

.figure {
    padding: 0.9em;
    border: 3px solid #f5bca8;
    background: #fff;
    margin: 0 auto 1em;
}

Для расположения изображений по центру мы должны устранить ситуацию, когда картинка “вылезет” за пределы “коробки”:

.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: 'Fig. ' counter(figures) ' - ';
}

Если вам нужно применить данный эффект не ко всем изображениям, а только к тем, что относятся к статье, можете задать им дополнительный класс (.numbered-figures) и воспользоваться следующим кодом:

.numbered-figures                       	{ counter-reset: figures; }
.numbered-figures .figure figcaption    	{ counter-increment: figures; }
.numbered-figures .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; }

Вариации

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

.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 подходит для свойств min-width, max-width, height, min-height и max-height.

В конце добавим максимальный размер изображению:

.figure-right img,
.figure-left img {
    max-width: 300px; /* Adjust to suit your needs */
}

Для небольших экранов

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

@media (max-width: 767px) {
    .figure-left,
    .figure-right {
        float: none;
        margin: 0 0 1em 0;
        width: 100%;
    }

    .figure img {
        max-width: 100%;
    }
}

Использование

Заюзать данный пример очень просто. Просто добавьте несколько элементов <figure> на страницу:

<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>

Вот и всё на сегодня. Надеюсь, данный приём вам пригодится!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/DtAWa7nrmQw/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Автоматическая нумерация изображения с помощью CSS счётчиков | | 2013-05-27 08:28:42 | | Статьи Web-мастеру | | В этом уроке мы затронем тему CSS счётчиков, поговорим о том, как можно организовать автоматический подсчёт графических элементов веб страницы.При написании статьи, поста для блога, урока или чего-то | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: