स्टैक्ड पेपर इफेक्ट - सीएसएस-ट्रिक्स

एक लोकप्रिय डिजाइन तकनीक एक कंटेंट कंटेनर बनाने के लिए है जो कागज की एक शीट की तरह दिखता है और एक स्तरित या तीन-आयामी शैली को जोड़ते हुए, इसके नीचे कागज की अन्य शीट को ढेर करने के लिए है। हम सीधे सीएसएस का उपयोग करके इस प्रभाव को बना सकते हैं, लेकिन कई प्रकार के स्टैक्ड पेपर डिज़ाइन हैं जिन पर हम विचार कर सकते हैं। हम विशेष रूप से चार के लिए स्निपेट प्रदान करेंगे।

बॉटम पर पेपर का वर्टिकल स्टैक

यहाँ पर विचार यह है कि हमारा कंटेंट कंटेनर कागज की सबसे ऊपर की शीट है और ऊपर शीट के नीचे उनके किनारों के साथ अधिक चादरें खड़ी हैं।

पेन स्टैक्ड पेपर इफ़ेक्ट देखें - कोडपेन पर सीएसएस-ट्रिक्स (@ सीएसएस-ट्रिक्स) द्वारा वर्टिकल।

.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।

पेन स्टैक्ड पेपर इफ़ेक्ट देखें - कोडपेन पर CSS-ट्रिक्स (@ सीएसएस-ट्रिक्स) द्वारा वर्टिकल टॉप।

.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; )