Класні CSS-ефекти наведення, які використовують обрізання фону, маски та 3D

Зараз ми розглянули серію публікацій про цікаві підходи до ефектів наведення CSS. Ми почали з а купа прикладів, які використовують CSS background властивості, потім перейшов до text-shadow майно де ми технічно не використовували жодних тіней. Ми також об’єднали їх із змінними CSS та calc() оптимізувати код і полегшити керування ним.

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

---

Ось лише смак того, що ми робимо:

Використання ефектів наведення background-clip

Давайте поговоримо про background-clip. Ця властивість CSS приймає a text значення ключового слова що дозволяє нам застосовувати градієнти до текст елемента замість фактичного фон.

Тож, наприклад, ми можемо змінити колір тексту при наведенні курсора так само, як і за допомогою color властивість, але таким чином ми анімуємо зміну кольору:

Все, що я зробив, це додав background-clip: text до елемента і transition background-position. Не має бути складнішим за це!

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

У цьому прикладі я використовую два різних градієнта та два значення з background-clip. Перший фоновий градієнт обрізається до тексту (завдяки text значення), щоб встановити колір при наведенні курсора, тоді як другий градієнт фону створює нижнє підкреслення (завдяки padding-box значення). Все інше прямо скопійовано з роботу, яку ми виконали в першій статті цієї серії.

Як щодо ефекту наведення, коли панель ковзає зверху вниз так, ніби текст сканується, а потім забарвлюється:

Цього разу я змінив розмір першого градієнта, щоб створити лінію. Потім я пересуваю його іншим градієнтом, який оновлює колір тексту, щоб створити ілюзію! Ви можете уявити, що відбувається в цій ручці:

Ми лише подряпали поверхню того, що ми можемо зробити з нашим background-clipповноваження ping! Однак цю техніку, ймовірно, не варто використовувати у виробництві, оскільки, як відомо, Firefox має a багато повідомлених помилок відноситься до background-clip. У Safari також є проблеми з підтримкою. Це залишає лише Chrome із надійною підтримкою для цього матеріалу, тож, можливо, відкриємо його, коли ми продовжимо.

Давайте перейдемо до використання іншого ефекту наведення background-clip:

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

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

Круто, правда? давайте розберемо код:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

У нас є три фонові шари — два градієнти і background-color визначено за допомогою --_c змінна, яка спочатку встановлена ​​на прозорий (#0000). При наведенні ми змінюємо колір на білий і --_c змінюється до основного кольору (--c).

Ось що відбувається з цього приводу transition: Спочатку ми застосовуємо перехід до всього, але відкладаємо color та background-color by 0.5s для створення ефекту ковзання. Відразу після цього змінюємо color і background-color. Ви можете не помітити візуальних змін, оскільки текст уже білий (завдяки першому градієнту), а фон вже встановлено на основний колір (завдяки другому градієнту).

Потім, виходячи з миші, ми застосовуємо миттєві зміни до всього (зверніть увагу на 0s затримка), за винятком color та background-color які мають перехід. Це означає, що ми повертаємо всі градієнти до початкових станів. Знову ж таки, ви, ймовірно, не побачите візуальних змін через текст color та background-color вже змінено при наведенні.

Нарешті, ми застосовуємо вицвітання до кольору та a background-color , щоб створити частину анімації, яку потрібно навести. Я знаю, це може бути складно зрозуміти, але ви можете краще уявити фокус, використовуючи різні кольори:

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

Let's not forget техніка DRY перемикання, яку ми використовували у попередніх статтях цієї серії, щоб допомогти зменшити кількість коду, використовуючи лише одну змінну для перемикача:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Якщо вам цікаво, чому я використав синтаксис RGB для основного кольору, це тому, що мені потрібно було пограти з альфа-прозорістю. Я також використовую змінну --_t щоб зменшити зайве обчислення, що використовується в transition власність

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

Я знаю, я знаю. Це божевільні та незвичайні ефекти наведення, і я розумію, що в більшості ситуацій вони занадто сильні. Але це як практикувати та вивчати CSS. Пам'ятайте, ми розсуваючи межі ефектів наведення CSS. Ефект наведення може бути новинкою, але ми вивчаємо нові прийоми, які, безсумнівно, можна використовувати для інших речей.

Ефекти наведення курсора за допомогою CSS mask

Вгадай що? CSS mask властивість використовує градієнти так само, як background property так, тож ви побачите, що те, що ми робимо далі, досить просто.

Почнемо з створення фантастичного підкреслення.

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

Введіть CSS mask.

Код може виглядати дивно, але логіка залишається такою ж, як і з усіма попередніми фоновими анімаціями. The mask складається з двох градієнтів. Перший градієнт визначається непрозорим кольором, який покриває область вмісту (завдяки content-box значення). Цей перший градієнт робить текст видимим і приховує нижню зигзагоподібну межу. content-box є mask-clip значення, яке поводиться так само, як background-clip

linear-gradient(#000 0 0) content-box

Другий градієнт охопить всю область (завдяки padding-box). Цей має ширину, яка визначається за допомогою --_p змінної, і вона буде розміщена в лівій частині елемента.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Тепер все, що нам потрібно зробити, це змінити значення --_p при наведенні курсора, щоб створити ефект ковзання для другого градієнта та показати підкреслення.

.hover:hover { --_p: 100%; color: var(--c);
}

Наступна демонстрація використовує шари маски як фон, щоб краще побачити, як відбувається трюк. Уявіть, що зелена і червона частини є видимими частинами елемента, а все інше прозоре. Ось що буде робити маска, якщо ми використовуємо з нею ті самі градієнти.

За допомогою такого трюка ми можемо легко створити багато варіацій, просто використовуючи іншу конфігурацію градієнта з mask майно:

Кожен приклад у цій демонстрації використовує дещо іншу конфігурацію градієнта для mask. Зверніть також увагу на поділ у коді між конфігурацією фону та конфігурацією маски. Ними можна керувати та обслуговувати самостійно.

Давайте змінимо конфігурацію фону, замінивши зигзагоподібне підкреслення хвилястим:

Ще одна колекція ефектів наведення! Я зберіг усі конфігурації маски та змінив фон, щоб створити іншу форму. Тепер ви можете зрозуміти, як мені це вдалося щоб досягти 400 ефектів наведення без псевдоелементів — і ми можемо мати більше!

Мовляв, чому б не щось на зразок цього:

Ось виклик для вас: Межа в останньому демо-версії є градієнтом із використанням mask властивість розкрити його. Чи можете ви зрозуміти логіку анімації? На перший погляд це може здатися складним, але це дуже схоже на логіку, яку ми розглядали для більшості інших ефектів наведення, які покладаються на градієнти. Напишіть своє пояснення в коментарях!

Ефекти наведення в 3D

Ви можете подумати, що неможливо створити 3D-ефект за допомогою одного елемента (і не вдаючись до псевдоелементів!), але CSS має спосіб зробити це.

Те, що ви бачите, не є реальним 3D-ефектом, а скоріше ідеальною ілюзією 3D в 2D-просторі, що поєднує в собі CSS background, clip-path та transform властивості.

Перше, що ми робимо, це визначаємо наші змінні:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Потім ми створюємо прозору межу з шириною, яка використовує вищезгадані змінні:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Верхня і права сторони елемента повинні дорівнювати --b значення, тоді як нижня і ліва сторони повинні дорівнювати сумі --b та --d (що є --_s змінна).

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

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

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

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Останнім кроком є ​​застосування a CSS clip-path щоб зрізати кути для такого відчуття довгої тіні:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

Це все! Ми щойно створили тривимірний прямокутник із лише двома градієнтами та а clip-path які ми можемо легко налаштувати за допомогою змінних CSS. Тепер все, що нам потрібно зробити, це анімувати його!

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

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

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

Ця ручка ізолює clip-path частину анімації, щоб побачити, що вона робить:

Останнім штрихом є переміщення елемента в протилежному напрямку за допомогою translate — і ілюзія ідеальна! Ось ефект із використанням різних користувацьких значень властивостей для різної глибини:

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

Комбінування ефектів!

Чудова річ у всьому, що ми розглянули, полягає в тому, що всі вони доповнюють один одного. Ось приклад, де я додаю text-shadow ефект від другої статті в серії до background техніка анімації з першої статті використовуючи 3D-трюк, який ми щойно розглянули:

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

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

Я застосував той самий ефект до зображень, і результат був досить хорошим для моделювання 3D з одним елементом:

Хочете детальніше розглянути, як працює остання демонстрація? Я щось написав на ньому.

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

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

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

---

Класні CSS-ефекти наведення, які використовують обрізання фону, маски та 3D спочатку опубліковано на CSS-трюки. Ти повинен отримати інформаційний бюлетень.

• Coinsmart. Найкраща в Європі біржа біткойн та криптовалют.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. БЕЗКОШТОВНИЙ ДОСТУП.
• CryptoHawk. Альткойн Радар. Безкоштовне випробування.
• Source: https://css-tricks.com/css-hover-effects-background-masks-3d/