В этой заметке мне хотелось бы описать один интересный эффект – создание тени внутри блока. На самом деле это не очень сложно, не отнимает много сил и не занимает много времени.
В моем примере тень будет находится внутри блока снизу. HTML-код блока должен выглядеть следующим образом.
HTML
<div class="bsh-wrap">
<div class="bsh-shad">
<div class="bsh-inner">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit libero ac nulla molestie, varius auctor urna feugiat. In libero nibh, consectetur ac odio nec, pulvinar sollicitudin erat.
Mauris eget tellus massa. Praesent ipsum nisl, porttitor at tellus ac, vulputate euismod urna.</p>
<p>Etiam condimentum ipsum quis dui hendrerit ultricies. Morbi vehicula hendrerit dolor. Donec quis dolor et felis aliquet luctus convallis vitae augue. Ut sit amet sagittis turpis. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Donec congue ut arcu eget egestas.</p>
<p>Maecenas ut sapien ante. Nulla sed blandit urna. Sed nec dolor id elit facilisis ullamcorper semper ut ligula.</p>
</div>
</div>
</div>
Для создания тени внутри блока «прикрепляем» к нему следующие CSS-стили.
CSS
body{font-family: Arial,Verdana,sans-serif;}
h2{text-align: center;margin:5px 0 10px 0;font-weight:bold;}
p{font-size:0.8em;margin-bottom:5px;}
.bsh-wrap{width:300px; border:1px solid #f28cfb; border-radius:5px; margin:25px; overflow:hidden;}
.bsh-shad{position:relative;}
.bsh-shad:after {bottom: -1px; box-shadow: 0 0 8px 0 rgba(167, 97, 166, 0.8); content: ""; height: 1px; left: 1px; position: absolute; right: 1px;}
.bsh-inner{padding:10px;}
Как я и писал выше, ничего сложно в коде нет. Вся суть заключается применении CSS-правила box-shadow
к псевдо-элементу :after
, который располагается после блока с классом bsh-shad
. Он позиционирован относительно div.bsh-shad
с отрицательным показателем снизу. За счет этого и получается эффект тени внутри блока. В моем примере тень расположена внизу, но просто ее можно переместить вверх, а также поменять цвет и радиус размытия.
Описанный в статье способ позволяет добавить тень внутри блока с одной стороны, как показано у меня в примере - снизу. Если же вам нужно стобы тень была со всех четырех сторон, воспользуйтесь CSS-правилом box-shadow
со значением inset
.
CSS
.bsh-wrap{box-shadow: 0 0 8px rgba(167, 97, 166, 0.8); inset;}
Демо-страничка с примером из заметки