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

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

by
Difficulty:IntermediateLength:MediumLanguages:

Ukrainian (українська мова) translation by Pembelight (you can also view the original English article)

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

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

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

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

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

wordpress thumbnail links to child pages
Отримайте плагін та файли шаблону з репозиторію на Github.

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

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

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

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

У нас є батьківський елемент <div>, який містить елементи <h2> і кілька елементів <article>. Коли ми використовуємо CSS Grid, ми спочатку визначаємо контейнер сітки. В цьому випадку ми могли б використовувати батьківський <div>, але це зробило б кожен прямий дочірній елемент, включаючи <h2>, елементом сітки, тому нам потрібно трохи змінити розмітку.

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

2. Адаптивна CSS-сітка в три ряди

За допомогою декількох властивостей ми перетворюємо наші мініатюри в сітку:

Найпростішими властивостями тут є display: grid; (перетворює всі дочірні елементи в елементи сітки та розставляє їх) і grid-gap: 1em; (що визначає відстань між колонками).

Невелика складність пов'язана з присвоєнням властивості grid-template-columns, яка визначає ширину колонок. Зазвичай ви очікуєте побачити щось на зразок repeat (3, 200px), що дасть нам три стовпці по 200px. В цьому випадку ми використовували ключове слово auto-fill для repeat (), а потім деякі значення. Ми отримуємо стільки rколонок з мінімальною з шириною в 300px і максимальною в 1fr, скільки поміститься в контейнері сітки.

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

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

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

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

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

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

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

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

Правило  transform: scale(1.1); масштабує наше зображення у всіх напрямках до 1.1 (де 1.0 тримає зображення в заданому розмірі). Ось акуратніший результат:

no more blurred lines

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

Ось нарешті маємо! Сітка з зображеннями з розмитим ефектом при наведенні на кожну мініатюру.  Єдине те, що назви не показуються для тих, хто не може наводити курсор на зображення (велика кількість планшетів і смартфонів не відображає ховер ефект при тривалому «натисканні»), що не дуже доступно.

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

Візьмемо цей медіа-запит, наприклад (він робить саме те, чого ми прагнемо):

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

Погляньте:

Примітка: Як уже згадувалося, підтримка цього медіа-запиту досить вагома, але дискусії про його реалізацію все ще тривають. Є велика ймовірність, що ця специфікація зміниться або будуть видалені деякі деталі.

Висновок

Молодці! Дякую за вашу увагу і сподіваюся, що ви дізналися кілька корисних порад, щоб побавитися з CSS (є є хтось, хто не любить таке?).  В результаті отрималася ось така демонстрація - додайте цей код до початкового шаблону Rachel, яку ми згадували на початку!

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

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.