3 шага для создания теней CSS, которые отлично смотрятся на любом фоне.
В этом уроке мы создадим великолепную тень CSS, применив несколько эффектов к свойству box-shadow
.
Для создания теней, которые отлично смотрятся на любом фоне, нам понадобится:
- Внутреннее свечение: вставка, светлая тень, делающая объект видимым в темном режиме.
- Кольцо теней: разброс
1px
, тень размытия0px
с более низкой непрозрачностью, что делает светлые объекты видимыми на белом фоне. - Множественные мягкие тени: серия мягких теней с постепенно увеличивающимися значениями «Y» и «размытие».
.component {
/* inner glow 👇 */
box-shadow: inset 0 0 0.5px 1px hsla(0, 0%,
100%, 0.075),
/* shadow ring 👇 */
0 0 0 1px hsla(0, 0%, 0%, 0.05),
/* multiple soft shadows 👇 */
0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}
Живая демонстрация:
В приведенном выше примере мы устанавливаем цвет объекта (фона) светлее в темном режиме, чтобы увеличить его «возвышение» и улучшить внешний вид.
Надеюсь Вам понравилась!