Когда тень отбрасывается от объекта она может принять массу различных форм и характеристик в зависимости от положения источника света и самого объекта.
Если вы думаете, что свойство box-shadow дает «нормальную» тень, то я вас разочарую. Это не так! Оно не симулирует нужную выразительность в полном объеме. По сути происходит происходит создание размытого силуэта объекта со сдвигом, степенью размытия и цветом. Собственно тут и все.
Однако, углубившись, я узнал, что можно добиться более натуральных характеристик используя свойство не один раз, а несколько. Так сказать, можно использовать многослойность теней, прямо как в photoshop. Как раз давайте с этим и разберемся.
Многослойные тени
Из примера выше видно, что первый блок выглядит немного неуклюже по сравнению со вторым — многослойным. Добиться качественного эффекта мы можем просто указывая параметры свойства через запятую, с каждым разом увеличивая смещение.
.vanilla {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.layered {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05),
0 2px 2px rgba(0, 0, 0, 0.05),
0 4px 4px rgba(0, 0, 0, 0.05),
0 8px 8px rgba(0, 0, 0, 0.12),
0 16px 16px rgba(0, 0, 0, 0.05);
}Данный простой метод даст вам намного больший контроль над тенями и поможет создать куда более реалистичный эффект. Вы сможете более точно настраивать резкость, расстояние и разброс. Однако обратите внимание на то, чем больше вы будете использовать слоев, тем меньшее значение alpha необходимо использовать. В противном случае будет чернота.
Вот простой пример реализации данных теней и демонстрация разницы:
.sh-4 {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07),
0 2px 2px rgba(0, 0, 0, 0.07),
0 4px 4px rgba(0, 0, 0, 0.07),
0 8px 8px rgba(0, 0, 0, 0.07);
}
.sh-6 {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05),
0 2px 2px rgba(0, 0, 0, 0.05),
0 4px 4px rgba(0, 0, 0, 0.05),
0 8px 8px rgba(0, 0, 0, 0.05),
0 16px 16px rgba(0, 0, 0, 0.05),
0 32px 32px rgba(0, 0, 0, 0.05);
}Управление резкостью теней
Управление резкостью происходит так же просто, как и размытием. Для этого мы просто изменяем альфа канал на каждом слое в большую или меньшею сторону, чтобы получить более или менее рассеянные тени.
Более резкая тень имеет максимальное значение alpha и наименьший сдвиг по осям, и с каждым новым слоем идет увеличение рассеивания и уменьшение значения непрозрачности.
.shadow-sharp {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.30),
0 2px 2px rgba(0, 0, 0, 0.25),
0 4px 4px rgba(0, 0, 0, 0.10),
0 8px 8px rgba(0, 0, 0, 0.07),
0 16px 16px rgba(0, 0, 0, 0.03);
}
.shadow-diffuse {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03),
0 2px 2px rgba(0, 0, 0, 0.07),
0 4px 4px rgba(0, 0, 0, 0.10),
0 8px 8px rgba(0, 0, 0, 0.20);
}Так же, можно играться и с размером blur. В итоге получая более объемные и мягкие тени. Тут уже будет вашим ДЗ. Попробуйте сами поиграться с ними и отписывайтесь в комментариях о результатах.
Для дизайнеров
Если вы используете редактор figma иди photoshop (в остальных не в курсе есть или нет), то вы так же можете использовать данный навык для оформления теней.
Я стал частенько использовать данный метод для кнопок или персонажей с прозрачностью, чтобы не юзать кисточку. Да я один из тех, кто тени руками рисовал. Однако теперь проще и быстрее потыкать мышкой в настройках и будет более-менее нормальный эффект. Особенно там, где не требуется сверхреалистичность.
