Как создать эффект стопки бумаги

Эффект стопки бумаг (Stacked Paper) помогает создать контейнер контента, который имеет вид сложенной бумаги. Таким образом можно добавить 3D стиль к веб-сайту и дать ему более реалистичный вид.

Эффект стопки бумаг можно создать с помощью CSS свойств и селекторов.

Для создания такого эффекта следуйте этим шагам:

1. Создайте HTML разметку.

  • Разместите тег <article> в ваш HTML.
  • Создайте paragraph для добавления контента.
  • Внутри тега <h2> укажите заголовок статьи.

2. Добавьте CSS.

  • Используйте ::before и ::after для создания пустого псевдоэлемента (content: "";), а потом добавьте к нему свойство position сразу после статьи (z-index: -1;).
  • Используйте свойство transform, чтобы повернуть псевдоэлементы и добавить эффект стопки бумаг.
  • Используйте свойство box-shadow для общего эффекта.
Необходимо использовать расширения -webkit- и -moz- вместе со свойствами transform и box-shadow, чтобы они поддерживались всеми браузерами. 
article {
position: relative;
margin: 50px auto;
padding: 40px 0;
width: 500px;
}
article::before,
article::after {
content: "";
width: 490px;
height: 250px;
position: absolute;
left: -2px;
top: -5px;
z-index: -1;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
article::after {
left: 0;    
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
article,
article::before,
article::after {
background: #fff;
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
h2,p{
margin: 0 40px 16px;
padding: 0;
}
h2 {
line-height: 1;
font-size: 32px;
font-weight: 700;
}
p {
line-height: 1.2;
font-size: 16px;
}

Вот и результат нашего кода.

Рассмотрим другой пример с эффектом стопки бумаг:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background: linear-gradient(#0042ad, #fff);
      padding: 20px;
      .letter {
      background: #ffffff;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      margin: 26px auto 0;
      max-width: 550px;
      min-height: 300px;
      padding: 24px;
      position: relative;
      width: 80%;
      .letter:before, .letter:after {
      content: "";
      height: 98%;
      position: absolute;
      width: 100%;
      z-index: -1;
      .letter:before {
      background: #fafafa;
      box-shadow: 0 0 8px rgba(0,0,0,0.4);
      -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.4);
      -moz-box-shadow: 0 0 8px rgba(0,0,0,0.4);
      left: -5px;
      top: 4px;
      transform: rotate(-2.7deg);
      -webkit-transform: rotate(-2.7deg);
      -moz-transform: rotate(-2.7deg);
      .letter:after {
      background: #f6f6f6;
      box-shadow: 0 0 3px rgba(0,0,0,0.2);
      right: -3px;
      top: 1px;
      transform: rotate(1.4deg);
      -webkit-transform: rotate(1.4deg);
      -moz-transform: rotate(1.4deg);
    </style>
  </head>
  <body>
    <div class="letter">
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
      </p>
    </div>
  </body>
</html>