O tehnică populară de proiectare este crearea unui container de conținut care arată ca o foaie de hârtie și stivuirea altor coli de hârtie sub aceasta, adăugând un stil stratificat sau tridimensional. Putem crea acest efect folosind CSS direct, dar există mai multe tipuri de modele de hârtie stivuite pe care le putem lua în considerare. Vom furniza fragmente în special pentru patru persoane.
Stivă verticală de hârtie pe partea de jos
Ideea aici este că containerul nostru de conținut este foaia superioară de hârtie și mai multe foi sunt stivuite sub aceasta cu marginile lor afișate în partea de jos a foii superioare.
Consultați Efectul de hârtie stivuit stilou - Vertical de CSS-Tricks (@ css-tricks) pe 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; )Stivă verticală de hârtie deasupra
Acesta este același concept ca și ultimul, dar cu teancul de hârtii dezvăluit în partea superioară a containerului în loc de partea inferioară. Singura diferență aici este că am repoziționat box-shadowproprietatea pe .paperelement folosind numere negative.
Consultați Efectul de hârtie stivuit stilou - partea verticală de CSS-Tricks (@ css-tricks) pe 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; )Stivă diagonală de hârtie
Aceasta este o metodă ușor diferită, în care folosim ::beforeși ::afterpseudo-elementele pentru a crea coli de hârtie suplimentare, mai degrabă decât box-shadowtehnica utilizată în exemplele anterioare.
Vedeți Efectul de hârtie stivuit stilou - Diagonal de CSS-Tricks (@ css-tricks) pe 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; )Stivă de hârtie dezorganizată
Putem eșalonarea foilor de hârtie pentru a crea un aspect intenționat dezordonat folosind același tip de tehnică cu pseudo-elemente ca și ultimul exemplu, deși folosind transformproprietatea pentru a roti foile de hârtie subiacente. Acest exemplu presupune utilizarea Autoprefixer sau că prefixele sunt utilizate pentru transformproprietatea în care suportul browserului poate scădea.
Vedeți Efectul de hârtie stivuit stilou - dezordonat de CSS-Tricks (@ css-tricks) pe 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; )