Μια δημοφιλής τεχνική σχεδιασμού είναι να δημιουργήσετε ένα δοχείο περιεχομένου που μοιάζει με ένα φύλλο χαρτιού και να στοιβάξετε άλλα φύλλα χαρτιού κάτω από αυτό, προσθέτοντας ένα στιβάδα ή τρισδιάστατο στυλ. Μπορούμε να δημιουργήσουμε αυτό το εφέ χρησιμοποιώντας ευθεία CSS, αλλά υπάρχουν πολλοί τύποι σχεδίων στοίβας χαρτιού που μπορούμε να εξετάσουμε. Θα παρέχουμε αποσπάσματα για τέσσερα συγκεκριμένα.
Κάθετη στοίβα χαρτιού στο κάτω μέρος
Η ιδέα εδώ είναι ότι το δοχείο περιεχομένου μας είναι το επάνω φύλλο χαρτιού και περισσότερα φύλλα στοιβάζονται κάτω από αυτό με τις άκρες τους να εμφανίζονται στο κάτω μέρος του επάνω φύλλου.
Ανατρέξτε στο Εφέ χαρτιού που έχει συσσωρευτεί με στυλό - Κάθετο από 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; )Κάθετη στοίβα χαρτιού στην κορυφή
Αυτή είναι η ίδια ιδέα με την τελευταία, αλλά με τη στοίβα χαρτιών που εμφανίζονται στο πάνω μέρος του δοχείου αντί για το κάτω μέρος. Η μόνη διαφορά εδώ είναι ότι έχουμε επανατοποθετήσει την box-shadowιδιότητα στο .paperστοιχείο χρησιμοποιώντας αρνητικούς αριθμούς.
Δείτε το Εφέ χαρτιού Stacked Paper - Vertical Top 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; )Διαγώνια στοίβα χαρτιού
Αυτή είναι μια ελαφρώς διαφορετική μέθοδος, όπου χρησιμοποιούμε τα ::beforeκαι ::afterψευδο-στοιχεία για να δημιουργήσουμε τα πρόσθετα φύλλα χαρτιού, παρά την box-shadowτεχνική που χρησιμοποιήθηκε στα προηγούμενα παραδείγματα.
Ανατρέξτε στο 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; )Μη οργανωμένη στοίβα χαρτιού
Μπορούμε να κλιμακώσουμε τα φύλλα χαρτιού για να δημιουργήσουμε μια σκόπιμα ακατάστατη εμφάνιση χρησιμοποιώντας το ίδιο είδος τεχνικής με ψευδο-στοιχεία με το τελευταίο παράδειγμα, αν και χρησιμοποιούμε την transformιδιότητα για να περιστρέψουμε τα υποκείμενα φύλλα χαρτιού. Αυτό το παράδειγμα προϋποθέτει τη χρήση του Autoprefixer ή ότι τα προθέματα χρησιμοποιούνται για την transformιδιότητα όπου ενδέχεται να μειωθεί η υποστήριξη του προγράμματος περιήγησης.
Ανατρέξτε στο 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; )