Populiari dizaino technika yra sukurti turinio talpyklą, panašią į popieriaus lapą, ir sukrauti kitus popieriaus lapus po ja, pridedant daugiasluoksnį ar trimatį stilių. Šį efektą galime sukurti naudodami tiesiai į viršų esančią CSS, tačiau galime apsvarstyti kelių rūšių popieriaus dizainus. Pateiksime fragmentus ypač keturiems.
Vertikalus popieriaus šūsnis apačioje
Idėja yra ta, kad mūsų turinio talpykla yra viršutinis popieriaus lapas, o po juo sukrauta daugiau lapų, kurių kraštai rodomi viršutinio lapo apačioje.
Žr. „Pen Stacked Paper Effect - Vertical by CSS-Tricks“ (@ css-tricks) „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; )Vertikalus popieriaus šūsnis viršuje
Tai ta pati koncepcija, kaip ir paskutinė, tačiau popieriaus šūsnis atsiskleidžia ne konteinerio, o viršaus konteinerio viršuje. Vienintelis skirtumas yra tas, kad mes pakeitėme elemento box-shadowypatybę .papernaudodami neigiamus skaičius.
Peržiūrėkite „CSS-Tricks“ (@ css-tricks) „Pen Stacked Paper Effect - Vertical Top“ iš „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; )Įstrižas popieriaus šūsnis
Tai yra šiek tiek kitoks metodas, kai mes naudoti ::beforeir ::afterpseudo-elementų, kad atsirastų papildomų popieriaus lapų, o ne vien box-shadowtechniką, naudojamą ankstesniuose pavyzdžiuose.
Peržiūrėkite „Pen Stacked Paper Effect - Diagonal by CSS-Tricks“ (@ css-tricks) „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; )Neorganizuotas popieriaus šūsnis
Mes galime suskirstyti popieriaus lapus, kad sukurtume tyčia netvarkingą išvaizdą, naudodamiesi ta pačia technika su pseudoelementais, kaip ir paskutiniame pavyzdyje, nors naudodami transformsavybę sukite pagrindinius popieriaus lapus. Šiame pavyzdyje daroma prielaida, kad naudojamas „Autoprefixer“ arba kad transformnuosavybei, kurioje naršyklės palaikymas gali išblėsti, naudojami priešdėliai .
Peržiūrėkite „Pen Stacked Paper Effect - Messy by CSS-Tricks“ (@ css-tricks) „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; )