Популарна техника дизајна је стварање контејнера за садржај који изгледа као лист папира и слагање осталих листова папира испод њега, додајући слојевити или тродимензионални стил. Овај ефекат можемо створити помоћу ЦСС-а, али можемо узети у обзир више врста дизајна наслаганих папира. Обезбедићемо исечке посебно за четворицу.
Вертикални сноп папира на дну
Идеја овде је да је наш контејнер са садржајем горњи лист папира, а више листова је наслагано испод њега, а ивице су приказане на дну горњег листа.
Погледајте ефекат папира наслаганог оловком - вертикално од ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
.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; )Вертикална хрпа папира на врху
Ово је исти концепт као и последњи, али са снопом папира откривеним на врху посуде уместо на дну. Једина разлика овде је што смо box-shadowсвојство репозиционирали на .paperелементу користећи негативне бројеве.
Погледајте ефекат папира наслаганог оловком - вертикални врх компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
.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; )Дијагонална хрпа папира
Ово је нешто другачији метод, где користимо ::beforeи ::afterпсеудо-елемената да створи додатне листове папира, а не box-shadowтехника која се користи у претходним примерима.
Погледајте ефекат папира наслаганог оловком - Дијагонала од ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
/* 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; )Неорганизована хрпа папира
Можемо тетурати листове папира да бисмо створили намерно неуредан изглед користећи исту врсту технике са псеудо-елементима као и последњи пример, мада користећи transformсвојство за ротирање основних листова папира. Овај пример претпоставља употребу Аутопрефикер-а или да се префикси користе за transformсвојство у којем подршка прегледача може нестати.
Погледајте ефекат папира наслаганог оловком - Месси би ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
.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; )