Матвей Земсков

Заметки веб-мастера

Воскресенье, 30 марта 2014 16:49

Тень внутри блока средствами CSS

Оцените материал
(0 голосов)

В этой заметке мне хотелось бы описать один интересный эффект – создание тени внутри блока. На самом деле это не очень сложно, не отнимает много сил и не занимает много времени.

тени внутри блока css

В моем примере тень будет находится внутри блока снизу. 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;}

Демо-страничка с примером из заметки

Прочитано 8610 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх