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

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

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

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

Немного фона

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

WordPress

Create a WordPress Image Gallery: Code the Plugin

Rachel McCollin

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

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

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

Организуем миниатюры с применением 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, сколько смогут вместиться в контейнер сетки.

CSS Grid Layout

CSS Grid Layout: Going Responsive With auto-fill and minmax()

Ian Yates

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

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

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 (а кому не понравиться?). Взгляните ещё раз на демку – можете добавить это в файлы темы, созданные Рэйчел в первой части.