Генератор теней CSS

Строение свойства box-shadow

Одна тень box-shadow — это список значений в фиксированном порядке: горизонтальное смещение, вертикальное смещение, радиус размытия, радиус растяжения и цвет, с необязательным ключевым словом inset. Обязательны только два смещения и цвет; размытие и растяжение по умолчанию равны нулю. Так сокращённая запись, которая читается как 0px 4px 12px rgba(0, 0, 0, 0.15), означает отсутствие горизонтального сдвига, четыре пикселя вниз, двенадцать пикселей размытия, нулевое растяжение и 15-процентный чёрный. Ползунки в этом инструменте записывают эту строку за вас, но понимание порядка делает правку вручную безболезненной.

Смещения размещают тень относительно блока. Положительное вертикальное смещение сдвигает тень вниз — именно это нужно для привычной иллюзии источника света над элементом; отрицательное значение поднимает её вверх. Горизонтальное смещение работает так же слева направо. Смещения — это самый сильный сигнал, по которому ваш мозг судит о том, насколько высоко парит элемент, поэтому беритесь за них прежде всего остального.

Размытие и растяжение: два радиуса, которые путают

Радиус размытия определяет, насколько мягкий край у тени. При нуле вы получаете чёткий дубликат блока; по мере роста размытия тень затухает на более широкой полосе и больше походит на настоящий рассеянный свет. Большинство естественных теней используют размытие, примерно в два-три раза превышающее вертикальное смещение. Учтите, что размытие не может быть отрицательным.

Растяжение — это значение, которое почти никто не задаёт, и оно мощное. Положительное растяжение раздувает тень наружу во всех направлениях ещё до применения размытия, делая её больше блока; отрицательное растяжение её сжимает. Крошечное отрицательное растяжение в паре с направленным вниз смещением и щедрым размытием — классический рецепт тени, которая плотно прижимается под карточкой, а не вытекает по бокам. Растяжение — это также способ нарисовать сплошное кольцо: нулевое смещение, нулевое размытие, несколько пикселей положительного растяжения и плоский цвет.

Внутренние тени для вдавленных и утопленных поверхностей

Добавление ключевого слова inset рисует тень внутри элемента, а не позади него, поэтому поверхность выглядит вырезанной внутрь. Так делают текстовое поле похожим на углубление, переключатель — на вдавленный, а панель — на утопленную в страницу. Теперь смещения указывают на внутренний край, который ловит тень, поэтому смещение вниз затемняет верхний внутренний край, имитируя свет, падающий сверху. Переключите параметр Inset в этом инструменте, чтобы переключиться между наружной и внутренней тенью, и понаблюдайте, как одни и те же числа меняют свой смысл на противоположный.

Наложение нескольких теней

Свойство box-shadow принимает список значений через запятую, и браузер отрисовывает каждую тень по порядку, помещая первую сверху. Это самый полезный приём для реалистичной глубины. Реальные объекты не отбрасывают одну тень; они отбрасывают плотную, более тёмную контактную тень прямо под краем и более широкую, более бледную окружающую тень дальше. Наложение небольшой малоразмытой тени поверх большой сильно размытой воспроизводит это, и результат выглядит куда правдоподобнее, чем способна любая одиночная тень.

Наложение — это также способ, которым системы дизайна строят шкалы высоты: возвышение в стиле Material обычно представляет собой две-три наложенные тени, настроенные вместе, и поднятие карточки на уровень выше меняет весь набор, а не подкручивает одно число. Можно даже смешать внутреннюю тень с наружными в одном объявлении, чтобы получить освещённый край и отброшенную тень одновременно.

Разбор примера: мягкая тень для карточки

Вот рецепт, который хорошо смотрится почти на любой светлой поверхности. Начните с нулевого горизонтального смещения, чтобы тень оставалась по центру, вертикального смещения около 8px, размытия примерно 24px и растяжения около минус 6px, чтобы она подобралась под карточку. Используйте почти чёрный цвет, но снизьте непрозрачность примерно до 12 процентов, выраженных как rgba(0, 0, 0, 0.12). Отрицательное растяжение не даёт мягкому краю выходить за углы, низкая непрозрачность не позволяет ей выглядеть как пятно, а умеренное смещение создаёт ощущение мягкого верхнего света. Для особенно чёткого результата наложите вторую тень со смещением 1px, почти нулевым размытием и примерно 6-процентным чёрным, чтобы сымитировать резкую контактную линию.

Частые ошибки и как их избежать

Самая частая ошибка — полностью непрозрачная, чисто чёрная тень с сильным размытием, которая читается как грязная и искусственная, а не как свет. Цветные фоны усугубляют это: чёрная тень на насыщенном синем выглядит грязной, поэтому тонируйте тень в сторону тона фона. Другая ошибка — относиться к растяжению как ко второму регулятору размытия; это не так, и оставление его на нуле при выкручивании размытия — вот почему некоторые тени кажутся одновременно нечёткими и слишком маленькими.

Люди также путают box-shadow с фильтром drop-shadow. box-shadow всегда следует прямоугольному блоку элемента, включая его border-radius, поэтому прозрачный PNG внутри блока всё равно получит прямоугольную тень. Фильтр drop-shadow обводит фактические непрозрачные пиксели, и это то, что нужно для нестандартных форм и вырезанных изображений. Используйте box-shadow для карточек, кнопок и панелей; беритесь за фильтр, когда силуэт не прямоугольный.

Производительность и ловушка большого размытия

Тени отрисовываются браузером, и очень большие радиусы размытия по-настоящему затратны, особенно когда они анимируются или появляются сразу на многих элементах. Анимация размытия или растяжения большой тени может вызывать перерисовку в каждом кадре и подёргивания на устройствах послабее. Если тень должна разрастаться при наведении, более плавный подход — заранее отрисовать большую тень на псевдоэлементе и анимировать его непрозрачность, поскольку непрозрачность дёшево композитить. Держите значения размытия разумными, избегайте сотен элементов с тенями на экране одновременно — и ваши интерфейсы останутся плавными.