Популярный метод дизайна - создать контейнер содержимого, который выглядит как лист бумаги, и сложить под ним другие листы бумаги, добавив многослойный или трехмерный стиль. Мы можем создать этот эффект, используя прямой CSS, но мы можем рассмотреть несколько типов сложенных бумажных рисунков. В частности, мы предоставим фрагменты для четырех.
Вертикальная стопка бумаги внизу
Идея здесь в том, что наш контейнер содержимого - это верхний лист бумаги, а под ним укладывается больше листов, а их края отображаются в нижней части верхнего листа.
См. «Эффект стопки бумаги пером - вертикальный» от CSS-Tricks (@ css-tricks) на CodePen.
.paper ( background: #fff; box-shadow: /* The top layer shadow */ 0 1px 1px rgba(0,0,0,0.15), /* The second layer */ 0 10px 0 -5px #eee, /* The second layer shadow */ 0 10px 1px -4px rgba(0,0,0,0.15), /* The third layer */ 0 20px 0 -10px #eee, /* The third layer shadow */ 0 20px 1px -9px rgba(0,0,0,0.15); /* Padding for demo purposes */ padding: 30px; )Вертикальная стопка бумаги сверху
Это та же концепция, что и предыдущая, но стопка бумаг открыта наверху контейнера, а не на дне. Единственная разница здесь в том, что мы переместили box-shadowсвойство в .paperэлементе, используя отрицательные числа.
См. «Эффект стопки бумаги пером - вертикальный верх» от CSS-Tricks (@ css-tricks) на CodePen.
.paper ( background: #fff; box-shadow: /* The top layer shadow */ 0 -1px 1px rgba(0,0,0,0.15), /* The second layer */ 0 -10px 0 -5px #eee, /* The second layer shadow */ 0 -10px 1px -4px rgba(0,0,0,0.15), /* The third layer */ 0 -20px 0 -10px #eee, /* The third layer shadow */ 0 -20px 1px -9px rgba(0,0,0,0.15); /* Padding for demo purposes */ padding: 30px; )Диагональная стопка бумаги
Это немного другой метод, где мы используем ::beforeи ::afterпсевдо-элементы , чтобы создать дополнительные листы бумаги, а не box-shadowметод , используемый в предыдущих примерах.
См. Раздел «Эффект стопки бумаги пером - диагональ» от CSS-Tricks (@ css-tricks) на CodePen.
/* Diagonal stacked paper effect */ .paper ( background-color: #fff; /* Need position to allow stacking of pseudo-elements */ position: relative; /* Padding for demo purposes */ padding: 30px; ) .paper, .paper::before, .paper::after ( /* Add shadow to distinguish sheets from one another */ 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; ) /* Second sheet of paper */ .paper::before ( left: 7px; top: 5px; z-index: -1; ) /* Third sheet of paper */ .paper::after ( left: 12px; top: 10px; z-index: -2; )Неорганизованная стопка бумаги
Мы можем расположить листы бумаги в шахматном порядке, чтобы создать намеренно беспорядочный вид, используя ту же технику с псевдоэлементами, что и в последнем примере, но используя transformсвойство для поворота нижележащих листов бумаги. В этом примере предполагается использование Autoprefixer или префиксы, используемые для transformсвойства, поддержка которого браузером может ослабнуть.
См. «Эффект сгруппированной бумаги пером - Беспорядок» от CSS-Tricks (@ css-tricks) на CodePen.
.paper ( background: #fff; padding: 30px; position: relative; ) .paper, .paper::before, .paper::after ( /* Styles to distinguish sheets from one another */ 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; )