Автор блогу Master.dev розповів про власний досвід пошуку способу тимчасово привертати увагу до довільного елемента на сторінці.
Найпростіший варіант — накласти внутрішню тінь через властивість box-shadow зі значенням inset. Такий підхід дає приємне світіння і чудово працює у базових випадках:
.highlighted-element { box-shadow: inset 0 0 40px 8px oklch(0.5574 0.2911 312.88 / 0.55), inset 0 0 12px 2px oklch(0.5574 0.2911 312.88 / 0.88); }
Цей ефект можна вдосконалити, обгорнувши тінь у @keyframes-анімацію: тоді світіння плавно з'являтиметься, збільшуватиметься і зникатиме за кілька секунд. Автор наводить приклад такої реалізації через стан :hover.
Проте йому хотілося чогось особливішого.
Замість одного кольору автор мав на меті отримати ефект, схожий на conic-gradient(), або взагалі використати текстуру чи зображення. Головне — більше свободи у вигляді, зберігши при цьому світіння і видимість самого елемента під ним, але з унікальним дизайном.
Для цього спочатку над виділеним елементом додається накладка:
.highlighted-element { position: relative; &::after { content: ""; position: absolute; inset: 0; background: ... whatever! } }
Такий код створює накладку потрібного розміру, що повністю перекриває елемент.
Наступне питання — як перетворити цю накладку на світіння, яке проявляється лише по краях.
Маскування як рішення
Спочатку зображення накладається на елемент тим самим способом, що й вище.
Далі псевдоелемент маскується — починаючи з лівого і правого краю:
--inset: 30px; mask-image: linear-gradient( to right, black 0%, transparent var(--inset), transparent calc(100% - var(--inset)), black 100% );
Найцікавіше те, що аналогічно можна замаскувати верхній і нижній краї другою маскою, а потім об'єднати обидві маски за допомогою mask-composite: add;.
--inset: 20px; mask-image: linear-gradient( to right, black 0%, transparent var(--inset), transparent calc(100% - var(--inset)), black 100% ), linear-gradient( to bottom, black 0%, transparent var(--inset), transparent calc(100% - var(--inset)), black 100% ); mask-composite: add;
Ось і вся свобода дій, яку шукав автор.
На цьому основна ідея завершується.
У прикладах вище використовувалося зображення, але насправді підходить будь-який контент. Сам автор прагнув отримати саме радужний ефект у стилі conic-gradient, про який згадував на початку.
У фінальному прикладі показано обидва типи світіння — класичний варіант через box-shadow і кастомний «що завгодно» — застосовані до випадкових елементів на кілька секунд.
Джерело: Master.dev Blog
