Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

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

by
Difficulty:IntermediateLength:MediumLanguages:

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

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

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

Немного фона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Взгляните:

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

Заключение

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.