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

Метод 1: использование псевдоэлементов
Один из подходов к дублированию тени блока — использование псевдоэлементов. Позиционируя эти элементы относительно родительского элемента, мы можем добиться желаемого эффекта.

«»;
позиция: абсолютная;
сверху: 0;
слева: 0;
справа: 0;
снизу: 0;
box-shadow: inherit;

.outer-shadow::before {
Transform: Translate(-2px, -2px);

.outer-shadow::after {
Transform: Translate (2 пикселя, 2 пикселя);

Метод 2: использование переменных CSS
Переменные CSS можно использовать для упрощения процесса дублирования и облегчения настройки эффекта тени блока.

:root {
  --box-shadow-color: rgba(0, 0, 0, 0.4);
  --box-shadow-offset: 5px;
}
.inner-outer-shadow {
  box-shadow:
    var(--box-shadow-offset) var(--box-shadow-offset) 0 var(--box-shadow-color),
    -var(--box-shadow-offset) -var(--box-shadow-offset) 0 var(--box-shadow-color);
}

Метод 3: использование фильтров SVG.
Фильтры SVG обеспечивают еще один подход к достижению эффекта тени дублирующегося блока. Применяя комбинацию фильтров «Тень» и «Смещение», мы можем воспроизвести тень как на внутренних, так и на внешних краях.

.svg-filter-shadow {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 0 rgba(0, 0, 0, 0.4));
}

Дублирование теней блока на внутренних и внешних краях элементов может повысить визуальную привлекательность вашего веб-дизайна. В этой статье мы рассмотрели три различных метода достижения этого эффекта: использование псевдоэлементов, переменных CSS и фильтров SVG. Каждый метод имеет свои преимущества и может быть адаптирован в соответствии с вашими конкретными требованиями к дизайну. Поэкспериментируйте с этими техниками и раскройте свой творческий потенциал, создавая потрясающие эффекты пользовательского интерфейса с помощью теней!