Створіть галерею зображень на CSS Grid (з ефектами розмиття та медіа-запитами)

У цьому уроці ми візьмемо кілька простих посилань на мініатюри і перетворимо їх в адаптивну CSS-сітку з розмитим ефектом при наведенні мишкою. Ми також використаємо відмінний CSS трюк, щоб користувачі сенсорного екрану також могли бачити цей ефект!

Ось що ми будемо створювати:

Невеличка передмова

Нещодавно розробниця Rachel McCollin написала статтю, в якій пояснюється, як інтегрувати галерею з посиланнями на мініатюри в шаблони WordPress.

• WordPress
  Create a WordPress Image Gallery: Code the Plugin
  Rachel McCollin

Посилання діють як навігація для дочірніх сторінок тієї сторінки, на якій знаходиться користувач (або тієї сторінки, яку ви вказали), і в результаті плагін виводить щось на зразок цього:

Використовуючи розмітку, згенеровану плагіном від Rachel, ми зробимо наступне:

• Розставимо мініатюрки за допомогою CSS Grid та отримаємо  адаптивну галерею.
• Створимо ховер ефект за допомогою CSS filter та transition.
• Використаємо витончений медіа-запит CSS, щоб користувачі гаджетів з сенсорним екраном могли бачити кожен заголовок мініатюри, хоч і без ховер ефекту.

1. Змініть розмітку (трошечки)

Давайте коротко розглянемо розмітку коду від Rachel. Після чистки код виглядає акуратнішим:

<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 Grid, ми спочатку визначаємо контейнер сітки. В цьому випадку ми могли б використовувати батьківський <div>, але це зробило б кожен прямий дочірній елемент, включаючи <h2>, елементом сітки, тому нам потрібно трохи змінити розмітку.

Ми обгорнемо всі елементи <article> в інший елемент <div> (не соромтеся використовувати будь-який елемент, який на вашу думку, найбільш вдалий), і ми присвоїмо йому клас grid-container. Використовуйте за базу цей стартовий зразок з CodePen.

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), що дасть нам три стовпці по 200px. В цьому випадку ми використовували ключове слово auto-fill для repeat (), а потім деякі значення. Ми отримуємо стільки rколонок з мінімальною з шириною в 300px і максимальною в 1fr, скільки поміститься в контейнері сітки.

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

Змініть розмір вікна вашого браузера і подивіться, як себе поводить сітка!

Ще одна деталь, яку потрібно додати:

img {
  width: 100%;
  height: auto;
}

Це дозволить переконатися, що зображення повністю заповнюють свої контейнери (особливо це необхідно для використання з демо від Rachel, так як нам потрібно перезаписати властивості ширини і висоти, які виводить WordPress).

3. Ефект наведення

При наведенні ми збираємося показувати заголовки, як оверлей для мініатюр. Також прихованим зображенням ми надамо червоний ефект і невелике розмиття, щоб поліпшити видимість накладеного тексту.

Додаємо заголовок

Щоб накласти заголовок, нам потрібно його позиціонувати, тому пропишемо для тега <article>  position: relative; а для заголовка 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);
}

Ось що отримується:

Кілька речей до відома:

1. Заголовок зникає, тому що браузер тепер відображає поверх нього розмите зображення.
2. Ефект розмиття виглядає добре, але по краям зображення теж розмивається (ми можемо це владнати).

Показувати прихований заголовок настільки просто, як прописати z-index: 1; до .location-title.

Виправити розмиті краї буде трохи складнішим. Для початку ми масштабуємо зображення, щоб зробити його трохи більшим, потім встановлюємо overflow: hidden; в контейнері зображення (.location-listing), щоб при розмитті більшого зображення його краї були ефективно обрізані. Ось готові властивості для двох розглянутих елементів:

.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 (є є хтось, хто не любить таке?).  В результаті отрималася ось така демонстрація - додайте цей код до початкового шаблону Rachel, яку ми згадували на початку!

Інші статті по темі

• Create a WordPress Image Gallery: Code the Plugin
  
• CSS Grid Layout: Going Responsive With auto-fill and minmax()
• Touch Devices Should Not Be Judged By Their Size про CSS трюки