Необычные CSS тени для блоков

Привет, ребята. Про CSS тени уже есть на блоге материал, но мы идем дальше и будем делать не совсем обычные и стандартные эффекты, а разберем как сделать тень блока в css при помощи псевдоклассов before и after. На сегодняшний день у всех этих свойств довольно сильная поддержка браузерами, поэтому можно смело применять в своих проектах. Для начала взгляните на примеры теней для блоков.

Демо

Создадим первый вариант исполнения, как на странице. Будем делать тень внизу блока слева и справа. Выглядит как прилипающий стикер. Понять это очень просто. Мы нарисуем еще 2 блока (before и after), повернем их по своей оси (rotate) на пару градусов и поместим под основной div. Только есть один маленький нюанс, без которого у вас ничего не поучится. Нужен родительский элемент, у которого будет свойство z-index с любым значением, а у псевдокласса он должен быть отрицательным, например -1, чтобы он разместился под основным блоком. Пишем HTML:

<div class="content">
  <div class="block">Первый блок</div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.content{
    z-index: 1;  
}
.block{
    width: 40%;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 40px;
    position: relative;
    background: #fff;
}
.block:before{
	position: absolute;
	content: "";
	width: 50%;
	height: 20px;
	bottom: 7px;
	left: 5px;
	background: transparent;
	transform: rotate(-3deg);
	z-index: -1;
	box-shadow: 0 11px 10px -2px #676767;
}
.block:after{
	position: absolute;
	content: "";
	width: 50%;
	height: 20px;
	bottom: 7px;
	right: 5px;
	background: transparent;
	transform: rotate(3deg);
	z-index: -1;
	box-shadow: 0 11px 10px -2px #676767;
}

Поздравляю, вы сделали красивую тень под объектом на CSS. Таким образом можно оформлять картинки на сайте. Но наиболее контрастно такие тени смотрятся, если общее оформление в светлых тонах. Если хотите посмотреть как реализованы остальные блоки, просто загляните в исходный код страницы. Пишите в комментариях удалось ли вам создать внешнюю CSS тень для блока.