Создание эффекта стопки бумаги с использованием 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); }

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

See the Pen gpeNvO by uscms (@uscms) on CodePen.

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