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 (то есть тень располагается внутри блока)

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

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

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

Похожие статьи

Прокрутить наверх

Оставьте Ваши контакты, и мы с Вами свяжемся

Отправляя заявку, вы даете согласие на обработку персональных данных

Заявка отправлена!
Ожидайте звонка менеджера.

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