Функція drop-shadow() додає тінь до зображень. На відміну від якості box-shadow до уваги беруться прозорі ділянки у зображенні і тінь відкидається з їх врахуванням.
Синтаксис
<code>filter: drop-shadow(<зсув x> < зсув по y><радіус розмиття><колір>);
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у вказаному порядку. | <размер> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- <зсув x>
- Зміщення тіні по горизонталі щодо картинки. Позитивне значення цього параметра задає зсув тіні вправо, негативне вліво. Обов'язковий параметр. Зміщення тіні по вертикалі щодо картинки. Позитивне значення задає зсув тіні вниз, негативне — вгору. Обов'язковий параметр.
- <розмиття>
- Встановлює радіус розмиття тіні. Чим більше це значення, тим сильніше тінь згладжується, стає ширшим і світлішим. Якщо цей параметр не заданий, за замовчуванням встановлюється рівним 0, тінь при цьому буде чіткою, а не розмитою.
- <колір> тінь чорна. Необов'язковий параметр.
При порожньому значенні всі параметри сприймаються як 0. Колір тіні за замовчуванням такий самий, як значення властивості color.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>drop-shadow()</title> <style> .shadow { filter: drop-shadow(0 0 3px rgba(100,0,0,0.5)); }
</style>
</head>
<body> <img src="image/trash.png" alt="Кошик з тінню" class="shadow">
</body>
</html>Результат цього прикладу показаний на рис. 1. Зауважте, що тінь повторює лінії зображення.
Мал. 1. Тінь у зображенні
Примітка
Chrome до версії 53, Opera до версії 40 та Safari до версії 9.1 підтримують властивість -webkit-filter.
Специфікація
| Специфікація | Статус |
|---|---|
| Filter Effects Module Level 1 | Робочий проект |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation ( Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 13 | 18 | 53 | 15 | 40 | 6 | 9.1 | 35 | |
| 4.4 | 35 | 37 | 6.1 | 9.3 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- > — властивість браузером не сприймається та ігнорує ється;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації. .