Добавить в закладки
Отличный хостинг от 159 рублей

Когда тень отбрасывается от объекта она может принять массу различных форм и характеристик в зависимости от положения источника света и самого объекта.

Если вы думаете, что свойство box-shadow дает «нормальную» тень, то я вас разочарую. Это не так! Оно не симулирует нужную выразительность в полном объеме. По сути происходит происходит создание размытого силуэта объекта со сдвигом, степенью размытия и цветом. Собственно тут и все.

Однако, углубившись, я узнал, что можно добиться более натуральных характеристик используя свойство не один раз, а несколько. Так сказать, можно использовать многослойность теней, прямо как в photoshop. Как раз давайте с этим и разберемся.

Многослойные тени

Натуральная, красивая box-shadow тень на вашем сайте 1

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

.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 необходимо использовать. В противном случае будет чернота.

Натуральная, красивая box-shadow тень на вашем сайте 3

Вот простой пример реализации данных теней и демонстрация разницы:

.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);
}

Управление резкостью теней

Управление резкостью происходит так же просто, как и размытием. Для этого мы просто изменяем альфа канал на каждом слое в большую или меньшею сторону, чтобы получить более или менее рассеянные тени.

Натуральная, красивая box-shadow тень на вашем сайте 5

Более резкая тень имеет максимальное значение 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 (в остальных не в курсе есть или нет), то вы так же можете использовать данный навык для оформления теней.

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

Доступный VPS