Popularna tehnika dizajna je stvaranje spremnika za sadržaj koji izgleda poput lista papira i slaganje ostalih listova papira ispod njega, dodajući slojeviti ili trodimenzionalni stil. Ovaj efekt možemo stvoriti koristeći CSS ravno prema gore, ali možemo uzeti u obzir više vrsta dizajna naslaganih papira. Osigurati ćemo isječke posebno za četvero.
Okomiti snop papira na dnu
Ideja je ovdje da je naš spremnik za sadržaj gornji list papira, a više listova složeno je ispod njega, a rubovi su prikazani na dnu gornjeg lista.
Pogledajte Učinak papira naslaganih olovkom - okomito od CSS-trikova (@ css-trikovi) na CodePenu.
.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; )Okomita hrpa papira na vrhu
To je isti koncept kao i posljednji, ali s hrpom papira otkrivenom na vrhu spremnika umjesto na dnu. Jedina razlika ovdje je u tome što smo box-shadowsvojstvo premjestili na .paperelement pomoću negativnih brojeva.
Pogledajte efekt naslaga papira - okomiti vrh od CSS-trikova (@ css-trikovi) na CodePenu.
.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; )Dijagonalna hrpa papira
To je malo drugačiji način, gdje koristimo ::beforei ::afterpseudo-elemenata za stvaranje dodatne listove papira, a ne box-shadowtehnika koristi u prethodnim primjerima.
Pogledajte efekt papira naslaganih olovkom - Dijagonala od CSS-trikova (@ css-trikovi) na CodePenu.
/* 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; )Neorganizirani stog papira
Možemo teturati listove papira kako bismo stvorili namjerno neuredan izgled koristeći istu vrstu tehnike s pseudo-elementima kao i posljednji primjer, iako koristeći transformsvojstvo zakretanja temeljnih listova papira. Ovaj primjer pretpostavlja upotrebu Autoprefixer-a ili da se prefiksi koriste za transformsvojstvo u kojem podrška preglednika može nestati.
Pogledajte efekt papira naslaganih olovkom - neuredno od CSS-trikova (@ css-trikovi) na CodePenu.
.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; )