Popularną techniką projektowania jest tworzenie kontenera zawartości, który wygląda jak arkusz papieru i układanie pod nim innych arkuszy papieru, dodając styl warstwowy lub trójwymiarowy. Możemy stworzyć ten efekt za pomocą prostego CSS, ale istnieje wiele rodzajów ułożonych w stos projektów papieru, które możemy rozważyć. W szczególności dostarczymy fragmenty dla czterech osób.
Pionowy stos papieru na dole
Pomysł polega na tym, że nasz kontener treści jest górnym arkuszem papieru, a pod nim znajduje się więcej arkuszy, których krawędzie są wyświetlane u dołu górnego arkusza.
Zobacz efekt stosu pióra - pionowy według CSS-Tricks (@ css-tricks) w 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; )Pionowy stos papieru na górze
Jest to ta sama koncepcja, co poprzednia, ale ze stosem papierów odsłoniętych na górze pojemnika zamiast na dole. Jedyna różnica polega na tym, że zmieniliśmy położenie box-shadowwłaściwości .paperelementu za pomocą liczb ujemnych.
Zobacz efekt stosu pióra - góra pionowa autorstwa CSS-Tricks (@ css-tricks) w 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; )Ukośny stos papieru
Jest to nieco inny sposób, w którym używamy ::beforei ::afterpseudo elementów do tworzenia dodatkowych arkuszy papieru, a nie box-shadowtechniki stosowanego w poprzednich przykładach.
Zobacz efekt ułożenia pióra - przekątna według CSS-Tricks (@ css-tricks) w 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; )Zdezorganizowany stos papieru
Możemy rozłożyć arkusze papieru, aby stworzyć celowo niechlujny wygląd, używając tego samego rodzaju techniki z pseudoelementami, jak w poprzednim przykładzie, ale używając transformwłaściwości do obracania leżących pod spodem arkuszy papieru. W tym przykładzie założono, że używana jest funkcja Autoprefixer lub że dla transformwłaściwości są używane prefiksy, w przypadku których obsługa przeglądarki może ulec osłabieniu.
Zobacz efekt ułożenia pióra na papierze - Messy by CSS-Tricks (@ css-tricks) w 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; )