Створіть галерею зображень на CSS Grid (з ефектами розмиття та медіа-запитами)
Ukrainian (українська мова) translation by Pembelight (you can also view the original English article)
У цьому уроці ми візьмемо кілька простих посилань на мініатюри і перетворимо їх в адаптивну CSS-сітку з розмитим ефектом при наведенні мишкою. Ми також використаємо відмінний CSS трюк, щоб користувачі сенсорного екрану також могли бачити цей ефект!
Ось що ми будемо створювати:
Невеличка передмова
Нещодавно розробниця Rachel McCollin написала статтю, в якій пояснюється, як інтегрувати галерею з посиланнями на мініатюри в шаблони WordPress.
Посилання діють як навігація для дочірніх сторінок тієї сторінки, на якій знаходиться користувач (або тієї сторінки, яку ви вказали), і в результаті плагін виводить щось на зразок цього:



Використовуючи розмітку, згенеровану плагіном від 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, скільки поміститься в контейнері сітки.
Змініть розмір вікна вашого браузера і подивіться, як себе поводить сітка!
Ще одна деталь, яку потрібно додати:
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); }
Ось що отримується:



Кілька речей до відома:
- Заголовок зникає, тому що браузер тепер відображає поверх нього розмите зображення.
- Ефект розмиття виглядає добре, але по краям зображення теж розмивається (ми можемо це владнати).
Показувати прихований заголовок настільки просто, як прописати 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, яку ми згадували на початку!