7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS Grid Layout

Создание галереи изображений на CSS сетке (с эффектом размытия и медиа запросами)

Read Time: 6 mins

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

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

Вот что мы будем создавать:

Немного фона

Недавно, Рэйчел МакКоллин написала урок, объясняющий то, как в тему WordPress добавить галерею на основе ссылок на изображения.

Эти ссылки действуют в качестве навигации для дочерних страниц, не зависимо от того на какой странице пользователь (или какую страницу вы выберите), а итоговый плагин выводит что-то типа этого:

wordpress thumbnail links to child pageswordpress thumbnail links to child pageswordpress thumbnail links to child pages
Плагин и файлы темы можете взять из этого Github репозитория.

С помощью генератора разметки в плагине Рэйчел, мы сделаем следующее:

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

1. Изменим разметку (слегка)

Давайте взглянем на разметку, сгенерированную кодом Рэйчел. После очистки, он выглядит вот так круто:

У нас тут родительский элемент <div>, который содержит <h2> и несколько элементов <article>. Если мы используем CSS сетку, сначала мы определяем контейнер сетки. Мы могли бы использовать для этого родительский <div>, но тогда каждый прямой дочерний элемент, даже <h2> станут элементами сетки, поэтому нам нужно кое-что изменить.

Мы обернём все элементы <article> в другой <div> (вы можете использовать любой элемент, который считаете наиболее подходящим), которому мы так изобретательно присвоим класс grid-container. Используйте этот исходный pen за основу.

2. Отзывчивая CSS-сетка в три строки

Всего несколько правил могут превратить наши миниатюры в сетку:

Тут display: grid; – делает дочерние элементы элементами сетки и располагает их как положено, grid-gap: 1em; – задаёт интервалы.

Из-за значения, которое мы задали свойству grid-template-columns, которое определяет наши столбцы, возникают небольшие сложности. Наверное, вы ожидали увидеть что-то вроде repeat(3, 200px), что дало бы нам 3 столбца по 200px. В нашем случае, для repeat(), мы использовали ключевое слово auto-fill, а затем несколько значений. Что даёт нам столько столбцов шириной минимум 300px и максимум 1fr, сколько смогут вместиться в контейнер сетки.

Изменяйте размер окна браузера и смотрите, как оно меняется!

Осталось добавить лишь одну деталь:

Это обеспечит правильное заполнение контейнера изображениями (особенно это необходимо для демо от Рэйчел, так как нам нужно переопределить свойства width и height для WordPress вывода).

3. Эффект при наведении

В качестве наложения на миниатюры, мы будем использовать названия (title), которые будут появляться при наведении. А ещё сделаем изображение под курсором красноватыми и немного размытыми, для удобства читаемости текста наложения.

Накладываем названия

Для наложения названия, нам нужно правильно его расположить, поэтому начнём с article и зададим ему position: relative;, а для title – position: absolute;. Также придадим фону красноватый эффект и сделаем так, чтобы он заполнял всё доступное пространство.

Хорошее начало!

thumbs step 1thumbs step 1thumbs step 1

Осталось доработать ещё одну-две вещи, включая лишнее пространство снизу (название немного больше, чем миниатюра). Это можно решить, удалив все line-height в контейнере изображений.

Оформляем названия

Некоторые типографические приёмы могут улучшить вид наших названий, а три строки с магией flexbox, выровняют их по центру.

Гораздо лучше:

Скрываем названия

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

Ещё мы задали правило transition, чтобы непрозрачность происходила постепенно (за 0,5 секунды). Давайте сделаем это:

Прекрасно! Теперь названия снова появляются при наведении курсора мыши:

title back on hovertitle back on hovertitle back on hover

Размытые линии

Мы уже создали отлично-выглядящий эффект при наведении, но может добавим ещё чего-нибудь, как думаете? Давайте добавим фильтр размытия к изображениям. Начнём с настройки фильтра размытия при обычном состоянии, чтобы было от чего отталкиваться при переходе. Затем, для состояния «при наведении», добавим размытие на 2px (можете поставить любую другую цифру, но я думаю, с 2px выглядит хорошо):

Вот, что получилось:

Отметим пару вещей:

  1. Названия исчезли потому, что теперь браузер показывает размытое изображение поверх него.
  2. Эффект размытия выглядит хорошо, но у нас появились размытые края (мы можем сделать это получше).

Исправить скрытые заголовки нам поможет z-index: 1;, если мы добавим его в .location-title.

Исправление размытых краёв немного сложнее. Начнём с масштабирования изображения, сделав его немного больше, затем для контейнера изображений (.location-listing) зададим overflow: hidden;, таким образом, при размытии большего изображения, его края удачно обрежутся. Вот окончательные свойства для двух проблемных моментов:

Правило transform: scale(1.1); масштабирует наши изображения во всех направлениях на 1,1 (1,0 не изменит их вовсе). Этот результат намного аккуратнее:

no more blurred linesno more blurred linesno more blurred lines

4. Проблема с сенсорными экранами

В принципе, всё готово! Прекрасная сетка изображений и эффект размытия на каждой миниатюрке. Осталась одна вещь – те, кто не могут навести на изображение, не увидят их названия (огромное количество планшетов и смартфонов не эмулируют наведение, при длительном нажатии), что не допустимо.

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

Например, возьмём этот медиа-запрос (он делает именно то, что от него ожидается):

В те фигурные скобки, мы вставим те стили, которые должны работать в браузерах, которые не обрабатывают :hover. Давайте сделаем это, мы зададим это для устройств, на которых наведение либо невозможно, либо неудобно и миниатюры изображений всегда будут размытыми, а названия видимыми.

Взгляните:

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

Заключение

Мы закончили! Спасибо, что были со мной, я надеюсь вы узнали что-то новое и вам понравилось играться с CSS (а кому не понравиться?). Взгляните ещё раз на демку – можете добавить это в файлы темы, созданные Рэйчел в первой части.

Что ещё почитать

Advertisement
Did you find this post useful?
Want a weekly email summary?
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.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.