Тень только справа и слева в CSS: решение box-shadow

Быстрый ответ

Если вы хотите создать тени только слева и справа, CSS-свойство box-shadow будет незаменимым инструментом. Настройте отрицательное смещение для левой тени и положительное для правой, не вовлекая при этом вертикальное смещение.

.element {
  box-shadow: inset -5px 0 5px -3px rgba(0,0,0,0.3), inset 5px 0 5px -3px rgba(0,0,0,0.3); /* Тени слева и справа готовы! */
}

Адаптируйте параметры RGBA для задания требуемого цвета и прозрачности, в то время как значения в пикселях помогут настроить ширину и интенсивность тени.

Примочки для точной настройки

Множественные тени для чёткости краёв

Если вы хотите убрать нежелательные верхние и нижние тени, добавьте дополнительные слои box-shadow с отрицательной шириной распространения. Такие слои "проглотят" лишние части, подобно действию "кода-ниндзя" 🐱‍💻:

.element {
  box-shadow: 
    inset -5px 0 5px -3px rgba(0,0,0,0.5), 
    inset 5px 0 5px -3px rgba(0,0,0,0.5),
    0 -5px 5px -3px rgba(0,0,0,0), /* Тень-призрак */
    0 5px 5px -3px rgba(0,0,0,0);  /* Ещё одна тень-призрак */
}

Благодаря сочетанию цвета фона и цвета тени у вас получатся чёткие края, при этом тень станет почти незаметной! 😎

Подробнее об этом расскажет наш спикер на видео

Псевдоэлементы для тонкой настройки теней

Применение псевдоэлементов ::before и ::after позволяет изящно управлять тенями, словно вы руководите мини-копиями объекта! 👥:

.element::before, .element::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  box-shadow: 0 0 5px #333; /* Мини-тень */
  z-index: -1;
}
.element::before {
  left: -10px; /* Тень слева */
}
.element::after {
  right: -10px; /* Тень справа */
}
.element {
  position: relative;
  overflow: hidden; /* Прячем элементы за пределами видимости. Логично. */
}

Clip-path для максимальной точности отсечения тени

Использование свойства clip-path "отсекает" ненужные участки тени, подобно тому как стилист стрижёт волосы, предоставляя тени уникальный контур.

.element {
  box-shadow: -10px 0 15px rgba(0,0,0,0.5), 
              10px 0 15px rgba(0,0,0,0.5); /* Двусторонняя тень */
  clip-path: inset(0 0 0 0 round 10px); /* Салон для стрижки теней */
}

Визуализация

Иллюстрация: [ ⬛,  ,  ⬛]
               |    |
               \🎨🎨/
                Боковые границы

Вывод теней:

До:         🖼️       После:         🖼️ 
          [ ⬛ ,  , ⬛ ]           [ 🌑 , , 🌕 ]
          Без теней               Вместе с тенями

/* CSS – волшебная палочка: */
.box {
  box-shadow: -10px 0 5px -5px #333,
               10px 0 5px -5px #333;
}

Тени словно мазки кистью 🖌️ на боковых гранях — voilà, только левая и правая стороны окружены тенями!

Поднимаем мастерство работы с тенями на новый уровень

Согласование работы с браузерами

Убедитесь, что ваши тени стильно выглядят и совместимы с различными браузерами. Так ваш дизайн будет работать так, как предполагалось, в любом браузере.

Основанные на изображениях решения: Тёмная сторона

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

Экспериментируйте, допускайте ошибки, обучайтесь, практикуйте

Позвольте себе быть креативным, исследуйте необычные подходы, пробуйте разные значения и методы. Смелые решения иногда приводят к поразительным визуальным результатам!

Полезные материалы

1. box-shadow – CSS: Cascading Style Sheets | MDN — Обширная информация о свойстве CSS box-shadow.
2. box-shadow | CSS-Tricks — Тонкости и секреты работы с тенями box-shadow.
3. CSS Box Shadow — Детальные инструкции и уроки по свойству box-shadow в CSS3.
4. How to Create Inset Shadow in CSS Only – Tutorial — Урок по созданию внутренних теней в CSS, так называемых inset shadows.
5. box-shadow vs drop-shadow | CodePen Blog — Сравнение и разъяснение разницы между box-shadow и фильтром drop-shadow.