Популярна техника за проектиране е да се създаде контейнер за съдържание, който прилича на лист хартия, и да се подредят други листове хартия под него, като се добави многослоен или триизмерен стил. Можем да създадем този ефект, като използваме CSS направо нагоре, но има няколко вида дизайни на подредени хартии, които можем да разгледаме. Ще предоставим фрагменти по-специално за четирима.
Вертикален куп хартия отдолу
Идеята тук е, че нашият контейнер за съдържание е горният лист хартия и повече листове са подредени под него, като краищата им се показват в долната част на горния лист.
Вижте Ефектът с хартиена подредена хартия - вертикално от CSS-трикове (@ css-трикове) на 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-трикове (@ css-трикове) на 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-трикове (@ css-трикове) на 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-трикове (@ css-трикове) на 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; )