Populární technikou návrhu je vytvořit kontejner obsahu, který vypadá jako list papíru, a pod něj naskládat další listy papíru a přidat vrstvený nebo trojrozměrný styl. Tento efekt můžeme vytvořit pomocí přímého CSS, ale můžeme vzít v úvahu několik typů návrhů skládaného papíru. Poskytneme úryvky zejména pro čtyři.
Svislý stoh papíru na dně
Myšlenka zde je, že náš obsahový kontejner je horní list papíru a pod ním je naskládáno více listů, jejichž okraje jsou zobrazeny ve spodní části horního listu.
Podívejte se na efekt skládaného papíru - svislý 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; )Svislý stoh papíru nahoře
Jedná se o stejný koncept jako ten poslední, ale s hromadou papírů odhalenou na horní straně kontejneru místo na dně. Jediným rozdílem je, že jsme box-shadowvlastnost na .paperelement přemístili pomocí záporných čísel.
Podívejte se na efekt skládaného papíru - svislá horní část pomocí 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ální stoh papíru
Jedná se o mírně odlišnou metodu, kdy k vytvoření dalších listů papíru používáme pseudoelementy ::beforea ::after, spíše než box-shadowtechniku použitou v předchozích příkladech.
Podívejte se na efekt papíru Pen Stacked - Diagonal od 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; )Neuspořádaný zásobník papíru
Můžeme rozložit listy papíru, abychom vytvořili záměrně chaotický vzhled pomocí stejného druhu techniky s pseudoelementy jako v předchozím příkladu, i když pomocí transformvlastnosti otočíme podkladové listy papíru. Tento příklad předpokládá použití Autoprefixeru nebo použití předpon pro transformvlastnost, kde může klesat podpora prohlížeče.
Podívejte se na efekt Pen Stacked Paper - Messy 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; )