Как устроена тень в CSS
Свойство box-shadow принимает до пяти значений: смещение по горизонтали, смещение по вертикали, радиус размытия, растяжение и цвет. Ключевое слово inset превращает внешнюю тень во внутреннюю.
| Параметр | Что делает |
|---|---|
| Смещение X | Сдвигает тень вправо, отрицательное — влево |
| Смещение Y | Сдвигает вниз, отрицательное — вверх |
| Размытие | Мягкость краёв, ноль даёт резкую тень |
| Растяжение | Увеличивает или уменьшает размер тени |
| Цвет | Обычно чёрный с прозрачностью |
| inset | Рисует тень внутри элемента |
У text-shadow параметров меньше: смещения, размытие и цвет. Растяжения и внутренней тени там нет.
Что отличает хорошую тень
- Свет падает сверху. Это привычно глазу, поэтому смещение по вертикали должно быть положительным, а по горизонтали — близким к нулю
- Никакого чистого чёрного. Полупрозрачный чёрный поверх фона выглядит естественно, сплошной — грязно
- Размытие больше смещения. Резкие тени с малым размытием смотрятся дёшево, кроме случаев, когда это осознанный приём
- Чем выше элемент, тем мягче тень. Модальное окно парит высоко — тень большая и рассеянная. Кнопка лежит почти на поверхности — тень короткая и плотная
- Единая система. Задайте три-четыре уровня высоты для всего проекта и используйте только их
Многослойные тени
Одна тень выглядит плоско, потому что в реальности объект отбрасывает и плотную близкую тень, и рассеянную дальнюю. Наложение двух-трёх слоёв с разным размытием и прозрачностью даёт заметно более естественный результат.
Производительность
Тени с большим радиусом размытия нагружают отрисовку, особенно на мобильных устройствах. Если тень применяется к элементу, который анимируется или часто перерисовывается, это заметно скажется на плавности.
Обходной приём: вместо анимации самого box-shadow меняйте прозрачность псевдоэлемента с уже готовой тенью — браузер обработает это на видеокарте.