В этой лекции разберём способы добавления теней и фильтров к элементам и тексту.

1. box-shadow — тень блока

Добавляет тень элементу. В отличие от border, тень не увеличивает размер элемента и не влияет на расположение соседей.

Синтаксис: box-shadow: смещение-x смещение-y размытие цвет;

Параметры:

• смещение-x — на сколько пикселей тень сдвинута вправо (отрицательное — влево)
• смещение-y — на сколько пикселей тень сдвинута вниз (отрицательное — вверх)
• размытие — насколько тень размыта (чем больше, тем мягче)
• цвет — цвет тени (обычно с прозрачностью, например rgba(0,0,0,0.2))

.shadow {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

Внутренняя тень — inset

Ключевое слово inset делает тень внутренней (рисует внутри элемента).

.inset-shadow {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

2. text-shadow — тень текста

Добавляет тень к тексту. Синтаксис похож на box-shadow, но нет параметра размера тени.

Синтаксис: text-shadow: смещение-x смещение-y размытие цвет;

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

Несколько теней одновременно

Можно добавить несколько теней через запятую. Например, две цветные тени для эффекта тиснения.

.multiple-shadows {
    background-color: white;
    color: #530899;
    text-shadow: 2px 2px 4px #14b8a6,
                 -2px -2px 4px #ffc107;
}

3. filter — фильтры

Фильтры позволяют применять к элементу графические эффекты, такие как размытие, изменение яркости, контрастности и другие.

Возможные значения:

• blur(px) — размытие
• brightness(%) — яркость (0% — чёрный, 100% — оригинал, >100% — ярче)
• contrast(%) — контрастность
• grayscale(%) — чёрно-белый (100% — полностью ч/б)
• drop-shadow() — тень (аналог box-shadow)

Пример 1: размытие (blur)

.blur {
    filter: blur(4px);
}

Пример 2: чёрно-белый (grayscale)

.grayscale {
    filter: grayscale(100%);
}

Пример 3: яркость (brightness)

.bright {
    filter: brightness(150%);
}

Пример 4: тень через drop-shadow

.drop-shadow {
    filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.3));
}

Пример 5: комбинация фильтров

.combined {
    filter: brightness(120%) contrast(150%) grayscale(50%);
}