В этом уроке мы расскажем, как создать интересный эффект, который превращает обычный прямоугольный элемент в стопку бумаги. Раньше подобный эффект создавали с помощью изображений, но мы сделаем это только с помощью CSS3.

Посмотрите демонстрацию работы и полный код

Не должно удивлять, что псевдоэлементы :before и :after используются для создания нижних страниц. Они повернуты с помощью свойств трансформации, чтобы стопка выглядела неровно. Эффект работает в браузерах Chrome, Safari, Firefox, Internet Explorer от версии 10 и Opera, как в старых версиях на движке Presto, так и в новых на движке Webkit. В некоторых старых браузерах нижние страницы могут отображаться, но они не будут повернуты, так что по факту они не будут видны. Тем не менее этот эффект даже в старых браузерах не разрушит функциональность блока.

Давайте начнем с кода HTML:

<div class="papers">
<p>some content</p>
</div>

В нем нет ничего особенного. Тут использованы блоки, но можно использовать и разделы, статьи или другие подходящие элементы. Эффект достигается с помощью класса .papers (бумаги).

Для начала применим цвет фона, рамку и тени к основному элементу и обоим псевдоэлементам:

.papers, .papers:before, .papers:after
{
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

Обратите внимание, что задано две тени блока: внутренняя тень страницы и небольшая внешняя тень.

После этого зададим стили для основного элемента. Нужные нам стили — ширина, внутренние и внешние отступы, но наиболее важно относительное позиционирование. Кстати, не задавайте в таких случаях свойство z-index, так как тогда псевдоэлементы окажутся наверху:

.papers
{
	position: relative;
	width: 50%;
	padding: 2em;
	margin: 50px auto;
}

Теперь применим свойства содержимого, размеров и расположения к псевдоэлементами :before и :after. В целом у них те же размеры, форма и расположение, что и у основного элемента:

.papers:before, .papers:after
{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 

А теперь переходим к особо интересной части — повороту элементов при использовании свойства трансформации. Для этого потребуется приставка производителя -webkit для браузеров Chrome, Safari и современных версий браузера Opera. Приставка производителя -o требуется для старых версий браузера Opera и мобильных браузеров Opera, также для этого браузера лучше использовать свойство rotate, а не rotateZ. Браузеры Firefox и Internet Explorer от версии 10 поддерживают свойство трансформации без приставки производителя:

	-webkit-transform: rotateZ(2.5deg);
	-o-transform: rotate(2.5deg);
	transform: rotateZ(2.5deg);
	z-index: -1;
}

Обратите внимание, что псевдоэлементам задано значение свойства z-index равное -1, чтобы оттолкнуть их под основной блок.

И, наконец, мы применим другие значения поворота для псевдоэлемента :after:

.papers:after
{
	-webkit-transform: rotateZ(-2.5deg);
	-o-transform: rotate(-2.5deg);
	transform: rotateZ(-2.5deg);
}

Вот и все, не так уж сложно.

Посмотрите демонстрацию работы и полный код

Используйте этот код, как Вам удобно, поменять цвета или углы наклона довольно просто, но не останавливайтесь на этим, пробуйте применить и другие интересные эффекты.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также: