CSS function drop-shadow

Опис

Функція drop-shadow() дозволяє додати тінь до елемента на основі вказаних параметрів, що надає візуального ефекту і може допомогти відокремити або виділити конкретний елемент на сторінці. Синтаксис drop-shadow() є простим та гнучким, з можливістю налаштування тіні за допомогою декількох ключових параметрів. Ось простий приклад використання:

box-shadow: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));

У цьому випадку створюється тінь з відступом 4 пікселі вправо та вниз, радіусом розмиття 10 пікселів та півпрозорим чорним кольором.

Функція drop-shadow() може бути корисною для створення візуальних ефектів на веб-сторінці, таких як підсвічування елементів або створення відчуття глибини.

автор: Bond

Порада: Експериментуйте з колорами, використовуючи різні значення color, щоб створювати візуально привабливі тіні.
автор: Bond
Порада: Використовуйте значення offset-x та offset-y для контролю за розташуванням тіні відносно елемента. Зміна цих значень дозволяє створювати різні ефекти.
автор: Bond
Порада: Налаштуйте blur-radius так, щоб досягти бажаного рівня розмиття тіні. Великі значення зроблять тінь більш розплывчастою, а малі значення - більш виразною.
автор: Bond
Порада: Використовуйте spread-radius для контролю розповсюдження тіні. Позитивне значення розповсюдить тінь за межі елемента, а від'ємне значення зробить її більш компактною.
автор: Bond

Синтаксис

drop-shadow(<offset-x> <offset-y> <blur-radius> <spread-radius> <color>)

Функція drop-shadow може отримувати 3 значень:

<offset-x> та <offset-y>

Числові значення, включаючи від'ємні, позитивні та нуль. Можуть бути виражені в пікселях (px), відсотках (%) або інших одиницях вимірювання відстані.

автор: Bond

<blur-radius> та <spread-radius>

Числові значення, включаючи нуль. Вимірюються в пікселях (px) або інших одиницях вимірювання відстані.

автор: Bond

<color>

Значення кольору, такі як іменовані колірні ключові слова (наприклад, "red" або "blue"), HEX-коди (наприклад, "#FF0000" для червоного) або функції кольору (наприклад, "rgba(255, 0, 0, 0.5)" для напівпрозорого червоного).

автор: Bond