Популярним дизайнерським прийомом є створення контейнера для вмісту, який виглядає як аркуш паперу, і укладання інших аркушів паперу під ним, додаючи багатошаровий або тривимірний стиль. Ми можемо створити цей ефект, використовуючи 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властивість обертати основні аркуші паперу. У цьому прикладі передбачається використання автопрефіксатора або використання префіксів для transformвластивості, де підтримка браузера може зникнути.
Дивіться Ефект паперу, складений ручкою - Messy by 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; )