Populárnou technikou návrhu je vytvorenie kontajnera obsahu, ktorý vyzerá ako list papiera, a stohovanie ďalších listov papiera pod ním, a to pridaním vrstveného alebo trojrozmerného štýlu. Tento efekt môžeme vytvoriť pomocou priameho CSS, ale môžeme zvážiť niekoľko typov návrhov stohovaného papiera. Poskytneme úryvky najmä pre štyri.
Zvislý stoh papiera na spodnej strane
Myšlienka tu je, že náš obsahový kontajner je horný list papiera a pod ním je naskladaných viac listov s ich okrajmi zobrazenými v spodnej časti horného listu.
Pozrite si efekt stohovaného papiera na pero - zvislý od CSS-Tricks (@ css-tricks) na 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; )Zhora zvislý stoh papiera
Ide o rovnaký koncept ako posledný, ale s hromadou papierov odhalenou na vrchu nádoby namiesto spodnej časti. Jediný rozdiel je v tom, že sme premiestnili box-shadowvlastnosť .paperprvku pomocou záporných čísel.
Pozrite si efekt stohovaného papiera na pero - zvislá horná časť od CSS-Tricks (@ css-tricks) na 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; )Diagonálny stoh papiera
To je trochu iný spôsob, kde sa používajú ::beforea ::afterpseudo-prvky pre vytvorenie ďalších listov papiera, skôr než box-shadowtechniky používané v predchádzajúcich príkladoch.
Pozrite si efekt pera na papieri - diagonálne pomocou CSS-Tricks (@ css-tricks) na 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; )Neusporiadaný stoh papiera
Môžeme rozložiť listy papiera, aby sme vytvorili zámerne chaotický vzhľad pomocou rovnakého druhu techniky s pseudoelementmi ako v minulom príklade, aj keď pomocou transformvlastnosti otáčame podkladové listy papiera. Tento príklad predpokladá použitie nástroja Autoprefixer alebo použitia predpon pre transformvlastnosť, kde môže podpora prehliadača klesnúť.
Pozrite si efekt stohovaného papiera na pero - chaotický od CSS-Tricks (@ css-tricks) na 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; )