Эта запись была сделана в Шпаргалки и помечена css-tricks Декабрь 24, 2015 (обновлено Декабрь 24, 2015)

---

Как сделать 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; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.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.ru не чаще одного раза в неделю ->

Помогла статья или комментарий автора? Отблагодарите автора:

---