Фирменный стиль социального интернет-сервиса Pinterest включает вертикальные столбцы собранных заметок. Pinterest использует для создания такой верстки JavaScript, но в этом уроке мы рассмотрим, как воссоздать подобную верстку только с помощью CSS. Мы создадим свое решение, используя новаторские работы Kushagra Agarwal и выдающиеся иллюстрации Claire Hummel. 

Создаем верстку

Изображения и их подписи заданы в простом коде HTML5. Показан код только для первых двух изображений, так как дальше он повторяется:

<div id="columns">
        <figure>
                <img src="cinderella.jpg" alt>
                <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
        </figure>
        <figure>
                <img src="rapunzel.jpg" alt>
                <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
        </figure>
…
</div>

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

#columns {
        column-width: 320px;
        column-gap: 15px;
        width: 90%;
        max-width: 1100px;
        margin: 50px auto;
}

Задание столбцам фиксированной ширины, как это ни удивительно, делает их более адаптивными: спецификация требует от браузера формировать верстку со столбцами, исходя из ответа на вопрос: «Сколько столбцов шириной 320px плюс зазоры может разместиться в доступном пространстве?» После вычислений создается верстка: шесть столбцов или один столбец, в зависимости от того, что подходит в данной ситуации.

Код CSS для отдельных элементов фигур и изображений, которые в них содержатся, довольно очевиден:

div#columns figure {
        background: #fefefe;
        border: 2px solid #fcfcfc;
        box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
        margin: 0 2px 15px;
        padding: 15px;
        padding-bottom: 10px;
        transition: opacity .4s ease-in-out;
        column-break-inside: avoid;
        display: inline-block;
}
div#columns figure img {
        width: 100%;
        height: auto;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 5px;
}

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

И, наконец, для создания эффекта при наведении указателя мыши с помощью переходов, добавленных ранее элементам фигур, использован сильно недооцененный отрицательный псевдоселектор:

div#columns:hover figure:not(:hover) {
        opacity: 0.4;
}

Этот селектор означает: если пользователь наводит указатель мыши в любое место корневого элемента, задать элементам фигур значение прозрачности 0,4, кроме элемента фигуры, непосредственно на который наведен указатель мыши.

В результате получаем следующую верстку:

Особенности отображения на мобильных устройствах

Для того, чтобы улучшить отображение на маленьких экранах мобильных устройств, в конце кода CSS можно добавить @media query:

@media screen and (max-width: 750px) {
        #columns { column-gap: 0px; }
        #columns figure { width: 100%; }
}

Другие способы

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

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание галереи из четырех изображений
• Создание улучшенных адаптивных галерей изображений с использованием Flexbox
• Создание улучшенных диаграмм с помощью режимов наложения и SVG