Информационный портал

Информационно-новостной портал

Новости рекламы и маркетинга. Новости Интернета.
Море полезной информации на сайте RetailDepartment.ru
Поделиться ссылкой с друзьями

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

Twitter
Нравится
RedLine

В этом уроке мы затронем тему 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

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

Правила добавления комментариев


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

Download SocComments v1.3