जब आप कुछ डालते हैं - कागज की एक नियमित शीट कहें - एक मनीला फ़ोल्डर में, उस चीज़ का एक हिस्सा फ़ोल्डर से थोड़ा सा बाहर निकल सकता है। वॉलेट और क्रेडिट कार्ड के साथ भी ऐसा ही है। कार्ड केवल एक स्मज को बाहर निकालते हैं ताकि आप एक त्वरित नज़र प्राप्त कर सकें कि आप कौन से कार्ड ले जा रहे हैं।
मैं इस तरह की चीज को "स्लिट" कहता हूं। एक भट्ठा वह जगह है जहां हम एक उद्घाटन का भ्रम पैदा करते हैं जिसके माध्यम से हम एक दृश्य तत्व को बाहर निकाल सकते हैं। और हम इसे CSS में कर सकते हैं!
डिजाइन का महत्वपूर्ण हिस्सा छाया है, जो वहां एक भट्ठा होने का दृश्य संकेत देता है। फिर स्लिट के लिए कवर है जो प्रदर्शित तत्व को नीचे से देखने के लिए जगह प्रदान करता है।
यहाँ हम एक साथ क्या बनाने जा रहे हैं:
आइए छाया बनाने के साथ शुरू करें
आपको आश्चर्य हो सकता है कि उदाहरण में छाया वास्तविक सीएसएस छाया के साथ नहीं बनाई गई है, जैसे box-shadow या एक drop-shadow() छानना इसके बजाय, छाया अपने आप में एक अलग तत्व है, अंधेरा और धुंधला। यह डिज़ाइन को उसकी डिफ़ॉल्ट और एनिमेटेड दोनों स्थितियों में अधिक अनुकूलनीय बनाने के लिए महत्वपूर्ण है।
डिजाइन में कवर अन्य तत्व है। आवरण वह है जिसे मैं उस तत्व को कहता हूं जो छाया को ओवरलैप करता है। यहाँ एक आकृति है जो दर्शाती है कि छाया और आवरण एक साथ कैसे आते हैं।
छाया एक छोटे से ईमानदार आयत से बनाई गई है जिसमें एक ढाल पृष्ठभूमि है। ढाल बीच में गहरा है। तो जब तत्व धुंधला हो जाता है, तो यह एक छाया बनाता है जो बीच में गहरा होता है; इसलिए अधिक आयामी।
अब, पुनर्निर्मित छाया का बायां आधा शीर्ष पर एक आयत के साथ कवर किया गया है, जो इसके कंटेनर की पृष्ठभूमि के समान ही रंगीन है।
कवर और छाया दोनों को तब बाईं ओर ले जाया जाता है ताकि यह स्तरित प्रतीत हो
कवर पर काम करना
डिजाइन की पृष्ठभूमि के साथ कवर करने के लिए, इसकी पृष्ठभूमि का रंग इसके युक्त तत्व से विरासत में मिला है। वैकल्पिक रूप से, आप मानकों का उपयोग करके कवर को उसकी पृष्ठभूमि में मिलाने का भी प्रयास कर सकते हैं: सीएसएस मास्क और मिश्रण मोड, आपके डिज़ाइन विकल्पों और आवश्यकताओं के आधार पर।
इन मानकों को कैसे लागू किया जा सकता है, इसके बारे में कुछ मूलभूत बातें जानने के लिए, आप इन लेखों का संदर्भ ले सकते हैं: सारा ड्रैसनर "मास्किंग बनाम क्लिपिंग: प्रत्येक का उपयोग कब करें" मास्क पर एक उत्कृष्ट प्राइमर प्रदान करता है। मैंने CSS ब्लेंड मोड के बारे में भी लिखा है इस लेख में जहां आप विषय पर ब्रश कर सकते हैं।
मेरे उदाहरण के स्रोत कोड में, आप देखेंगे कि मैंने तत्वों को संरेखित और ढेर कर दिया है
CSS ग्रिड भी मुझे उन तीनों को सेट करने की अनुमति देता है divs इसलिए वे सभी पूर्ण-चौड़ाई में हैं
main > div {
grid-area: 1 / 1;
}इससे सब कुछ एक दूसरे के ऊपर ढेर हो जाता है। आम तौर पर, हम ग्रिड में अन्य तत्वों के साथ तत्वों को कवर करने से बचने के लिए कड़ी मेहनत करते हैं। लेकिन यह उदाहरण इस पर निर्भर करता है। मैंने दिया है .slit-cover 50% की चौड़ाई पर जो स्वाभाविक रूप से इसके नीचे की छवि को प्रकट करता है। वहां से, मैंने एक सेट किया transform उस पर जो इसे 50% नकारात्मक दिशा में ले जाता है, प्लस छोटी राशि मैंने पहले छाया को स्थानांतरित कर दिया (25px) यह भी सुनिश्चित करने के लिए कि प्रकट किया गया है।
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}एंड देयर वी हैव इट! एक सुंदर प्राकृतिक दिखने वाला भट्ठा जो किसी फ़ोल्डर, बटुए, या जो कुछ भी बाहर झांकता है उसकी नकल करता है।
ऐसा करने के और भी तरीके हैं! एक के लिए, फ्लेक्सबॉक्स तत्वों को एक पंक्ति में पंक्तिबद्ध करने और इस तरह केंद्र में संरेखित करने के लिए प्राप्त कर सकता है। चीजों को एक साथ लाने के कई तरीके हैं। और हो सकता है कि आपके पास इसका उपयोग करने का कोई तरीका हो box-shadow संपत्ति, drop-shadow() फ़िल्टर, या यहां तक कि एसवीजी फिल्टर उसी प्रकार का छाया प्रभाव प्राप्त करने के लिए जो वास्तव में भ्रम बेचता है।
और आप अपना खुद का लुक और फील पाने के लिए इस पर पूरी तरह से लगाम लगा सकते हैं। उदाहरण के लिए, छाया और छवि की स्थिति को बदलने का प्रयास करें। या रंग संयोजनों के साथ खेलें और बदलें blur() फ़िल्टर मूल्य। कवर और छाया के आकार को भी बदल दिया जा सकता है - मुझे यकीन है कि आप सीधे के बजाय घुमावदार छाया बना सकते हैं और इसे टिप्पणियों में हमारे साथ साझा कर सकते हैं!
