Populārs dizaina paņēmiens ir satura konteinera izveidošana, kas izskatās kā papīra lapa, un zem tā sakrauj citas papīra lapas, pievienojot slāņainu vai trīsdimensiju stilu. Mēs varam izveidot šo efektu, izmantojot taisni uz augšu CSS, taču mēs varam apsvērt vairāku veidu sakrauto papīra dizainu. Mēs nodrošināsim fragmentus it īpaši četriem.
Vertikāla papīra kaudze apakšā
Ideja ir tāda, ka mūsu satura konteiners ir augšējā papīra loksne un zem tās ir sakrautas vairāk loksnes, kuru malas ir redzamas augšējās loksnes apakšdaļā.
Skatiet pildspalvas sakrautā papīra efektu - vertikāli, izmantojot CSS-Tricks (@ css-tricks) vietnē 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; )Vertikāla kaudze uz augšu
Tas ir tāds pats jēdziens kā pēdējais, bet papīra kaudze tiek atklāta konteinera augšpusē, nevis apakšā. Vienīgā atšķirība šeit ir tā, ka mēs esam pārvietojuši box-shadowrekvizītu uz .paperelementa, izmantojot negatīvus skaitļus.
Skatiet CSS-Tricks (@ css-tricks) pildspalvas sakrautā papīra efektu - vertikālo augšdaļu vietnē 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ālā papīra kaudze
Tas ir nedaudz atšķirīga metode, kur mēs izmantojam ::beforeun ::afterpseido-elementus, lai radītu papildu papīra lapas, nevis box-shadowtehniku izmanto iepriekšējos piemēros.
Skatiet CSS-Tricks (@ css-tricks) pildspalvas sakrautā papīra efektu pa diagonāli.
/* 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; )Neorganizēta papīra kaudze
Mēs varam sadalīt papīra loksnes, lai izveidotu tīši netīru izskatu, izmantojot tāda paša veida tehniku ar pseidoelementiem kā pēdējo piemēru, lai gan, izmantojot transformrekvizītu, pagrieziet pakārtotās papīra lapas. Šajā piemērā tiek pieņemts, ka tiek izmantots Autoprefixer vai prefiksi tiek izmantoti transformīpašumam, kurā pārlūkprogrammas atbalsts var mazināties.
Vietnē CodePen skatiet pildspalvas sakrautā papīra efektu - CSS-Tricks (@ css-tricks) netīrs.
.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; )