Вигадливі декорації зображень: контури та складна анімація

Останні дві статті цієї серії з трьох частин ми витратили на те, щоб грати з градієнтами, щоб створити справді акуратні прикраси зображень, використовуючи лише елемент. У цій третій і останній частині ми збираємося вивчити більше методів використання CSS outline власність. Це може здатися дивним, оскільки ми зазвичай використовуємо outline намалювати просту лінію навколо елемента — щось на кшталт border але він може малювати лише всі чотири сторони одночасно і не є частиною Box Model.

Однак ми можемо зробити з ним більше, і саме з цим я хочу поекспериментувати в цій статті.

Почнемо з нашого першого прикладу — накладання, яке зникає при наведенні курсора з класною анімацією:

Ми могли б досягти цього, додавши додатковий елемент поверх зображення, але це те, що ми ставимо перед собою НЕ робити в цій серії. Натомість ми можемо скористатися CSS outline властивості та левериджу, що він може мати негативне зміщення та здатний перекривати свій елемент.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

Хитрість полягає в тому, щоб створити outline що дорівнює половині розміру зображення, а потім зміщує його на половину розміру зображення з від’ємним значенням. Додайте трохи напівпрозорості за допомогою кольору, і ми отримаємо накладення!

Решта відбувається далі :hover. Ми оновлюємо outline а перехід між обома контурами створює крутий ефект наведення. Цю ж техніку також можна використовувати для створення ефекту згасання, коли ми не рухаємося outline але зробити його прозорим.

Замість використання половини розміру зображення в цьому, я використовую дуже великий outline значення товщини (100vmax) під час застосування маски CSS. Завдяки цьому більше не потрібно знати розмір зображення — цей трюк працює для всіх розмірів!

Ви можете зіткнутися з проблемами використання 100vmax як велику цінність у Safari. Якщо це так, розгляньте попередній прийом, коли ви замінюєте 100vmax з половиною розміру зображення.

Ми можемо піти ще далі! Наприклад, замість простого обрізання зайвого outline, ми можемо створювати фігури та застосовувати химерну анімацію розкриття.

Круто правда? The outline це те, що створює жовте накладання. The clip-path кліпи доп outline щоб отримати форму зірки. Потім, навівши курсор, ми робимо колір прозорим.

О, ви хочете натомість сердечка? Ми точно можемо це зробити!

Уявіть усі можливі комбінації, які ми можемо створити. Все, що нам потрібно зробити, це намалювати фігуру за допомогою маски CSS та/або clip-path і поєднати його з outline трюк. Одне рішення, безмежні можливості!

І, так, ми точно можемо анімувати це також. Не забуваймо про це clip-path є анімованим і mask покладається на градієнти — те, про що ми дуже докладно розповідали в перших двох статтях цієї серії.

Я знаю, анімація трохи глючить. Це скоріше демонстрація для ілюстрації ідеї, а не «кінцевий продукт», який буде використовуватися на виробництві. Ми хотіли б оптимізувати речі для більш природного переходу.

Ось демонстрація, яка використовує mask замість цього. Це той, яким я вас дражнив наприкінці остання стаття:

Ви знали, що outline власність була здатна на стільки дивовижного? Додайте його до своєї панелі інструментів для красивих прикрас зображень!

Поєднайте всі речі!

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

Якби ви бачили ці демонстрації вперше, ви могли б припустити, що для їх створення використовується купа додаткових обгорток div і псевдоелементів. Але все відбувається безпосередньо на елемент. Це єдиний селектор, який нам потрібен, щоб отримати ці вдосконалені форми та ефекти!

Підводячи підсумок

Що ж, боже, дякую, що був зі мною в цій серії з трьох частин останні кілька тижнів. Ми дослідили низку різних технік, які перетворюють прості зображення на щось привабливе та інтерактивне. Ви використаєте все, що ми розглянули? Звісно ні! Але я сподіваюся, що це було гарною вправою для вас, щоб поглибити розширене використання функцій CSS, таких як градієнти, mask, clip-path та outline.

І ми все робили лише одним елемент! Жодних додаткових обгорток div і псевдоелементів. Звичайно, це обмеження, яке ми наклали на себе, але воно також спонукало нас досліджувати CSS і намагатися знайти інноваційні рішення для поширених випадків використання. Отже, перш ніж закачувати додаткову розмітку у ваш HTML, подумайте, чи здатний CSS уже впоратися з цим завданням.