Box-shadow только справа и слева

·

Как сделать box-shadow только справа и слева от контейнера?

.container { min-width: 1024px; margin: 0 auto; padding: 0; position: relative; }
.container:before,
.container:after {
  content: " ";
  clear: both;
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
.container:before {
    box-shadow: -15px 0 15px -15px #000 inset;
    left: -15px;
}
.container:after {
    box-shadow: 15px 0 15px -15px #000 inset;
    right: -15px;
}

Вкратце, идея в том, что контейнеру добавляются абсолютно позиционированные псевдоэлементы слева и справа, к которым и добавляется box-shadow со свойством inset (то есть тень располагается внутри блока)

Поделиться записью:
Picture of Агентство Romapad
Агентство Romapad
Работаем с 2009 года. Реализовано более 400 проектов. Слаженная команда профессионалов. Создание и администрирование сайтов. Техническая поддержка. Помощь новичкам.
Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

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

Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed 

Join our newsletter and get 20% discount
Promotion nulla vitae elit libero a pharetra augue