Создание галереи изображений на CSS сетке (с эффектом размытия и медиа запросами)
Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)
В этом уроке мы возьмём пачку ссылок на обычные миниатюры изображений и превратим их в отзывчивую галерею на CSS сетке, с эффектом размытия при наведении. А ещё мы применим крутой CSS трюк, чтобы это всё работало на тач-скринах.
Вот что мы будем создавать:
Немного фона
Недавно, Рэйчел МакКоллин написала урок, объясняющий то, как в тему WordPress добавить галерею на основе ссылок на изображения.
Эти ссылки действуют в качестве навигации для дочерних страниц, не зависимо от того на какой странице пользователь (или какую страницу вы выберите), а итоговый плагин выводит что-то типа этого:

С помощью генератора разметки в плагине Рэйчел, мы сделаем следующее:
- Организуем миниатюры с применением CSS Grid, что даст нам отзывчивую галерею.
- С помощью CSS фильтров и переходов, создадим эффект, срабатывающий при наведении мыши.
- Используем изящный медиа-запрос CSS, чтобы пользователи с сенсорными экранами видели заголовок каждой миниатюры, без наведения.
1. Изменим разметку (слегка)
Давайте взглянем на разметку, сгенерированную кодом Рэйчел. После очистки, он выглядит вот так круто:
<div class="child-page-listing"> <h2>Our Locations</h2> <article class="location-listing"> <a class="location-title" href="#">San Francisco</a> <div class="location-image"> <a href="#"> <img src="image.jpg" alt="san francisco"> </a> </div> </article> <!-- more articles --> </div>
У нас тут родительский элемент <div>
, который содержит <h2>
и несколько элементов <article>
. Если мы используем CSS сетку, сначала мы определяем контейнер сетки. Мы могли бы использовать для этого родительский <div>
, но тогда каждый прямой дочерний элемент, даже <h2>
станут элементами сетки, поэтому нам нужно кое-что изменить.
Мы обернём все элементы <article>
в другой <div>
(вы можете использовать любой элемент, который считаете наиболее подходящим), которому мы так изобретательно присвоим класс grid-container
. Используйте этот исходный pen за основу.
2. Отзывчивая CSS-сетка в три строки
Всего несколько правил могут превратить наши миниатюры в сетку:
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 1em; }
Тут display: grid;
– делает дочерние элементы элементами сетки и располагает их как положено, grid-gap: 1em;
– задаёт интервалы.
Из-за значения, которое мы задали свойству grid-template-columns
, которое определяет наши столбцы, возникают небольшие сложности. Наверное, вы ожидали увидеть что-то вроде repeat(3, 200px)
, что дало бы нам 3 столбца по 200px. В нашем случае, для repeat()
, мы использовали ключевое слово auto-fill
, а затем несколько значений. Что даёт нам столько столбцов шириной минимум 300px и максимум 1fr, сколько смогут вместиться в контейнер сетки.
Изменяйте размер окна браузера и смотрите, как оно меняется!
Осталось добавить лишь одну деталь:
img { width: 100%; height: auto; }
Это обеспечит правильное заполнение контейнера изображениями (особенно это необходимо для демо от Рэйчел, так как нам нужно переопределить свойства width и height для WordPress вывода).
3. Эффект при наведении
В качестве наложения на миниатюры, мы будем использовать названия (title), которые будут появляться при наведении. А ещё сделаем изображение под курсором красноватыми и немного размытыми, для удобства читаемости текста наложения.
Накладываем названия
Для наложения названия, нам нужно правильно его расположить, поэтому начнём с article и зададим ему position: relative
;, а для title – position: absolute;
. Также придадим фону красноватый эффект и сделаем так, чтобы он заполнял всё доступное пространство.
.location-listing { position: relative; } .location-title { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(90,0,10,0.4); }
Хорошее начало!

Осталось доработать ещё одну-две вещи, включая лишнее пространство снизу (название немного больше, чем миниатюра). Это можно решить, удалив все line-height
в контейнере изображений.
.location-image { line-height: 0; }
Оформляем названия
Некоторые типографические приёмы могут улучшить вид наших названий, а три строки с магией flexbox, выровняют их по центру.
.location-title { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(90,0,10,0.4); /* typographic styles */ color: white; font-size: 1.5em; font-weight: bold; text-decoration: none; /* position the text centrally*/ display: flex; align-items: center; justify-content: center; }
Гораздо лучше:

Скрываем названия
Теперь, давайте скроем названия, убрав его непрозрачность, чтобы мы видели его только при наведении. Пара правил для нашего .location-title
после тех, что уже есть, должны с этим справиться:
/* hide the title by default */ opacity: 0; transition: opacity .5s;
Ещё мы задали правило transition
, чтобы непрозрачность происходила постепенно (за 0,5 секунды). Давайте сделаем это:
.location-listing:hover .location-title { opacity: 1; }
Прекрасно! Теперь названия снова появляются при наведении курсора мыши:

Размытые линии
Мы уже создали отлично-выглядящий эффект при наведении, но может добавим ещё чего-нибудь, как думаете? Давайте добавим фильтр размытия к изображениям. Начнём с настройки фильтра размытия при обычном состоянии, чтобы было от чего отталкиваться при переходе. Затем, для состояния «при наведении», добавим размытие на 2px (можете поставить любую другую цифру, но я думаю, с 2px выглядит хорошо):
.location-image img { filter: blur(0px); transition: filter 0.3s ease-in; } .location-listing:hover .location-image img { filter: blur(2px); }
Вот, что получилось:

Отметим пару вещей:
- Названия исчезли потому, что теперь браузер показывает размытое изображение поверх него.
- Эффект размытия выглядит хорошо, но у нас появились размытые края (мы можем сделать это получше).
Исправить скрытые заголовки нам поможет z-index: 1;
, если мы добавим его в .location-title
.
Исправление размытых краёв немного сложнее. Начнём с масштабирования изображения, сделав его немного больше, затем для контейнера изображений (.location-listing
) зададим overflow: hidden;
, таким образом, при размытии большего изображения, его края удачно обрежутся. Вот окончательные свойства для двух проблемных моментов:
.location-image img { filter: blur(0px); transition: filter 0.3s ease-in; transform: scale(1.1); } .location-listing { position: relative; overflow: hidden; }
Правило transform: scale(1.1);
масштабирует наши изображения во всех направлениях на 1,1 (1,0 не изменит их вовсе). Этот результат намного аккуратнее:

4. Проблема с сенсорными экранами
В принципе, всё готово! Прекрасная сетка изображений и эффект размытия на каждой миниатюрке. Осталась одна вещь – те, кто не могут навести на изображение, не увидят их названия (огромное количество планшетов и смартфонов не эмулируют наведение, при длительном нажатии), что не допустимо.
К счастью, у CSS есть очень полезное взаимодействие для медиа-запросов, что поможет нам (их поддерживает большое количество браузеров). Эти запросы определят механизм ввода браузера – качество указательного устройства, возможность наведения и некоторые другие специальные вещи, так что мы сможем довольно точно понять, если наши миниатюры просматриваются на устройстве с сенсорным экраном.
Например, возьмём этот медиа-запрос (он делает именно то, что от него ожидается):
@media (hover: none) { }
В те фигурные скобки, мы вставим те стили, которые должны работать в браузерах, которые не обрабатывают :hover
. Давайте сделаем это, мы зададим это для устройств, на которых наведение либо невозможно, либо неудобно и миниатюры изображений всегда будут размытыми, а названия видимыми.
/* for touch screen devices */ @media (hover: none) { .location-title { opacity: 1; } .location-image img { filter: blur(2px); } }
Взгляните:

Примечание: как упоминалось, поддержка этого вполне оправдана, но разговоры о реализации интерактивных медиа-запросов все ещё продолжаются. Есть большая вероятность, что спецификация изменится или её части будут удалены.
Заключение
Мы закончили! Спасибо, что были со мной, я надеюсь вы узнали что-то новое и вам понравилось играться с CSS (а кому не понравиться?). Взгляните ещё раз на демку – можете добавить это в файлы темы, созданные Рэйчел в первой части.
Что ещё почитать
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post