css.in.ua
Підтримати

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() може бути корисною для створення візуальних ефектів на веб-сторінці, таких як підсвічування елементів або створення відчуття глибини.

Порада:

Використовуйте значення offset-x та offset-y для контролю за розташуванням тіні відносно елемента. Зміна цих значень дозволяє створювати різні ефекти.
Порада:

Налаштуйте blur-radius так, щоб досягти бажаного рівня розмиття тіні. Великі значення зроблять тінь більш розплывчастою, а малі значення - більш виразною.
Порада:

Використовуйте spread-radius для контролю розповсюдження тіні. Позитивне значення розповсюдить тінь за межі елемента, а від'ємне значення зробить її більш компактною.
Порада:

Експериментуйте з колорами, використовуючи різні значення color, щоб створювати візуально привабливі тіні.

Синтаксис

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

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

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

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

<color>

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

Переглядачі

Переглядач

18

35

6

15

12
Переглядач

4.4

53

35

6

Мобільних переглядачів ще не додано.

Приклади


Кілька елементів, які змінюють свої тіні при наведенні курсору.

Два однакових елементи з різними кольорами, один з них має застосовану функцію тіні.

Документи

Зв'язок