Графический эффект "стопка бумаги" на CSS

Популярный дизайнерский прием - создать контейнер с содержимым, который выглядит как лист бумаги, и поместить под него другие листы бумаги, добавив многослойный или трехмерный стиль. Мы создадим такой эффект, используя чистый CSS, при этом мы рассмотрим несколько типов "стопок бумаги".

Вертикальная стопка бумаги с листами снизу

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

HTML:

<div class="paper"></div>

CSS:

.paper {
  background: #fff;
  box-shadow:
    /* Тень верхнего слоя */
    0 1px 1px rgba(0,0,0,0.15),
    /* Второй слой */
    0 10px 0 -5px #eee,
    /* Тень второго слоя */
    0 10px 1px -4px rgba(0,0,0,0.15),
     /* Третий слой */
    0 20px 0 -10px #eee,
    /* Тень третьего слоя */
    0 20px 1px -9px rgba(0,0,0,0.15);
    /* Отступ для демо */
    padding: 30px;
}

Результат:

Вертикальная стопка бумаги с листами сверху

Это та же самая концепция, что и в предыдущем варианте, но с пачкой листов, раскрытых сверху контейнера, а не снизу. Единственная разница здесь в том, что мы изменили свойство box-shadow элемента .paper на отрицательные значения.

HTML:

<div class="paper"></div>

CSS:

.paper {
  background: #fff;
  box-shadow:
    /* Тень верхнего слоя */
    0 -1px 1px rgba(0,0,0,0.15),
    /* Второй слой */
    0 -10px 0 -5px #eee,
    /* Тень второго слоя */
    0 -10px 1px -4px rgba(0,0,0,0.15),
     /* Третий слой */
    0 -20px 0 -10px #eee,
    /* Тень третьего слоя */
    0 -20px 1px -9px rgba(0,0,0,0.15);
    /* Отступ для демо */
    padding: 30px;
}

Результат:

Диагональная стопка бумаги

Это несколько другой метод. Здесь для создания дополнительных листов бумаги мы используем псевдоэлементы ::before и ::after, а не свойство box-shadow, как в предыдущих примерах.

HTML:

<div class="paper"></div>

CSS:

/* Создание эффекта диагональной стопки бумаги */
.paper {
  background-color: #fff;
  /* Нужно задать позиционирование, для работы псевдоэлементов */
  position: relative;
  /* Отступ для демо */
  padding: 30px;
}

.paper,
.paper::before,
.paper::after {
  /* Добавим тень, чтобы отделить листы друг от друга */
  box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
}

/* Второй лист бумаги */
.paper::before {
  left: 7px;
  top: 5px;
  z-index: -1;
}

/* Третий лист бумаги */
.paper::after {
  left: 12px;
  top: 10px;
  z-index: -2;
}

Результат:

Рассыпанная стопка бумаги

Мы можем рассыпать листы бумаги, чтобы придать вид беспорядка. Для этого будем также использовать псевдоэлементы, как и в предыдущем примере. Однако, для поворота нижних листов мы будем использовать свойство transform. В этом примере следует использовать инструмент Autoprefixer или явно указать префиксы для свойства transform, чтобы оно корректно работало во всех браузерах.

HTML:

<div class="paper"></div>

CSS:

.paper {
  background: #fff;
  padding: 30px;
  position: relative;
}

.paper,
.paper::before,
.paper::after {
  /* Стили, чтобы отделить листы друг от друга */
  box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  border: 1px solid #bbb;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  height: 95%;
  width: 99%;
  background-color: #eee;
}

.paper::before {
  right: 15px;
  top: 0;
  transform: rotate(-1deg);
  z-index: -1;
}

.paper::after {
  top: 5px;
  right: -5px;
  transform: rotate(1deg);
  z-index: -2;
}

Результат: