CSS के साथ ड्रॉप शैडो कैसे बनाएं

हालांकि हर साल डिजाइन के रुझान अलग-अलग होते हैं, आप मुख्य छाया प्रभावों के उपयोग पर भरोसा कर सकते हैं जैसे डब्बे की छाया तथा परछाई डालना वेबसाइट के सौंदर्यशास्त्र में सकारात्मक योगदान करने के लिए। आप उपयोग कर सकते हैं ड्रॉप-छाया लजीज के रूप में सामने आए बिना सुखद, खूबसूरती से प्रदान किए गए प्रभाव बनाने के लिए।

आइए CSS पर करीब से नज़र डालें परछाई डालना संपत्ति।

CSS ड्रॉप-शैडो क्या है?

परछाई डालना( ) एक सीएसएस प्रभाव है जो एक निर्दिष्ट वस्तु के आकार के चारों ओर एक छाया प्रदर्शित करता है। यहाँ एक CSS लागू करने के लिए वाक्य रचना है परछाई डालना.

वाक्य - विन्यास:
फ़िल्टर: ड्रॉप-छाया (ऑफ़सेट-एक्स ऑफ़सेट-वाई ब्लर-त्रिज्या रंग);

की एक विस्तृत श्रृंखला है फिल्टर कार्य समेत धुंधला ( ), चमक ( ), तथा परछाई डालना( ).

ऑफसेट-एक्स क्षैतिज दूरी निर्धारित करता है और ऑफसेट-वाई ऊर्ध्वाधर दूरी निर्धारित करता है। ध्यान दें कि ऋणात्मक मान छाया को बाईं ओर रखते हैं (ऑफसेट-एक्स) और ऊपर (ऑफसेट-वाई) वस्तु।

अंतिम दो पैरामीटर वैकल्पिक हैं। आप छाया की धुंधली त्रिज्या को लंबाई के रूप में निर्दिष्ट कर सकते हैं। डिफ़ॉल्ट रूप से, यह 0 पर सेट है। आपके पास नकारात्मक धुंधला त्रिज्या नहीं हो सकता है।

छाया का रंग इस प्रकार निर्दिष्ट किया गया है. यदि आपने कोई रंग निर्दिष्ट नहीं किया है, तो यह के मान का अनुसरण करता है रंग संपत्ति।

CSS ड्रॉप-शैडो कब उपयोगी है?

आप पहले से ही जानते होंगे कि डब्बे की छाया काम बहुत अच्छा करता है। तो, आप सोच सकते हैं, हमें इसकी आवश्यकता क्यों है परछाई डालना बिलकुल? ऐसे कई मामले हैं जहां परछाई डालना( ) समारोह एक जीवनरक्षक है। आइए उनमें से कुछ पर एक नज़र डालें:

गैर-आयताकार आकार

एक के विपरीत डब्बे की छाया, आप एक जोड़ सकते हैं परछाई डालना गैर-आयताकार आकार के लिए। उदाहरण के लिए, हमारे पास एक गैर-आयताकार आकार के साथ एक पारदर्शी एसवीजी या पीएनजी है - उदाहरण के लिए एक तारा। यहां, ऑब्जेक्ट से मेल खाने वाली छाया को जोड़ना या तो पूरा किया जा सकता है डब्बे की छाया या परछाई डालना. दोनों परिदृश्यों पर विचार करें:

एचटीएमएल

सीएसएस

.star-img img {
प्रदर्शन: इनलाइन-ब्लॉक;
ऊंचाई: 15em;
चौड़ाई: 25em;
}
।डब्बे की छाया {
लाल रंग;
बॉक्स-छाया: 0.60em 0.60em 0.2em;
}
।परछाई डालना {
फ़िल्टर: ड्रॉप-शैडो (0.60em 0.60em 0.2em);
}

उत्पादन:

दोनों प्रभावों की तुलना करते समय, यह स्पष्ट है कि a डब्बे की छाया एक आयताकार छाया देता है; इससे कोई फर्क नहीं पड़ता कि छवि पारदर्शी है या पहले से ही एक पृष्ठभूमि है। दूसरी ओर, परछाई डालना आपको एक छाया बनाने की अनुमति देता है जो छवि के आकार के अनुरूप है।

सीमित कारक हैं कि परछाई डालना( ) फ़ंक्शन प्रकार के सभी मापदंडों को स्वीकार करता है सिवाय इनसेट कीवर्ड और फैला हुआ पैरामीटर।

समूहीकृत तत्व

ऐसे कई उदाहरण हैं जब आपको कुछ तत्वों को ओवरलैप करके घटकों को बनाने की आवश्यकता हो सकती है। यदि आप उपयोग कर रहे हैं डब्बे की छाया, आपको सही तरीके से छाया डालने की कोशिश करने की समस्या का सामना करना पड़ेगा। यहां बताया गया है कि छवि और टेक्स्ट घटक को समूहीकृत करते समय यह कैसे काम करता है:

एचटीएमएल

वर्तमान में रहना

लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। वोलुप्तास पोरो क्वो नाम ओडिट, नॉन डेबिटिस, फैसिलिस एलिगेंडी ईए लेबोरे अबकाति यूट किआ एस्परियोरेस। मोदी, भ्रष्ट कमोडिटी quisquam पूर्व numquam घटना।

बेसिक सीएसएस

तन {
पैडिंग: 5em 1em;
फ़ॉन्ट-फ़ैमिली: 'लुसीडा सैन्स', 'लुसीडा सैन्स रेगुलर', 'लुसीडा ग्रांडे',
'लुसीडा सैन्स यूनिकोड', जिनेवा, वर्दाना, सेन्स-सेरिफ़;
}
एच2 {
फ़ॉन्ट-आकार: 2rem;
}
पी {
फ़ॉन्ट-आकार: 0.8rem;
}
.अभिभावक-कंटेनर {
प्रदर्शन: फ्लेक्स;
फ्लेक्स-दिशा: स्तंभ;
ऊंचाई: 17rem;
चौड़ाई: 50em;
}
.छवि-कंटेनर img {
चौड़ाई: 15em;
स्थिति: निरपेक्ष;
जेड-इंडेक्स: 1;
शीर्ष: 2em;
बाएं: 1.5em;
}
.पाठ्य-कंटेनर {
रंग: आरजीबी (255, 236, 236);
पृष्ठभूमि-रंग: आरजीबी (141 0 35);
चौड़ाई: 30rem;
गद्दी: 3rem;
अलाइन-सेल्फ: फ्लेक्स-एंड;
स्थिति: रिश्तेदार;
}

अब, लागू करें डब्बे की छाया तथा परछाई डालना अंतर देखने के लिए।

।परछाई डालना {
फ़िल्टर: ड्रॉप-शैडो (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.5));
}
।डिब्बा,
.बॉक्स img {
बॉक्स-छाया: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

आउटपुट:

जैसा कि आप देख सकते हैं, डब्बे की छाया प्रत्येक तत्व पर व्यक्तिगत रूप से लागू किया जाता है जबकि परछाई डालना उन दोनों को समूहित करता है और छाया लागू करता है।

कटे हुए तत्व

आप का उपयोग कर सकते हैं क्लिप-पथ एक निश्चित क्षेत्र को क्लिप करने के लिए संपत्ति जो यह निर्धारित करती है कि किसी छवि या तत्व के कौन से हिस्से दिखाए जाने चाहिए। NS ड्रॉप-छाया फ़िल्टर हमें a. बनाने की अनुमति देता है परछाई डालना उस तत्व के माता-पिता को लागू करके क्लिप किए गए तत्व पर:

एचटीएमएल

सीएसएस

.अभिभावक-कंटेनर {
फ़िल्टर: ड्रॉप-शैडो (0rem 0rem 1.5rem मैरून);
}
.क्लिप्ड-तत्व {
चौड़ाई: 50em;
ऊंचाई: 50em;
मार्जिन: 0 ऑटो;
पृष्ठभूमि-छवि: url (मुस्कुराते हुए-girl.jpg);
क्लिप-पथ: सर्कल (50%);
पृष्ठभूमि-आकार: कवर;
बैकग्राउंड-रिपीट: नो-रिपीट;
}

आउटपुट:

हमने 50% छवि को गोलाकार पथ से क्लिप किया है। इसलिए ड्रॉप-छाया फ़िल्टर छवि के केवल दृश्य भाग पर लागू होता है। क्या यह कमाल नहीं है?

सीमाएं और मतभेद

जैसा कि हमने ऊपर चर्चा की, परछाई डालना का समर्थन नहीं करता फैला हुआ पैरामीटर। इसका मतलब है कि रूपरेखा प्रभाव बनाना संभव नहीं होगा परछाई डालना( ) कार्य करता है क्योंकि यह हर जगह मारा जाता है। इसके अलावा, यह से अलग छाया प्रभाव प्रदान करता है डब्बे की छाया तथा पाठ की छाया (समान मापदंडों के साथ)। आप महसूस कर सकते हैं कि के बीच मतभेद डब्बे की छाया तथा परछाई डालना उबाल लें सीएसएस बॉक्स मॉडल. एक इसका अनुसरण करता है जबकि दूसरा नहीं करता है। यहाँ एक उदाहरण है:

एचटीएमएल

हर MUO लेख आपको एक कदम और करीब लाएगा।


हर MUO लेख आपको एक कदम और करीब लाएगा।



हर MUO लेख आपको एक कदम और करीब लाएगा।

बेसिक सीएसएस

तन {
पैडिंग: 5em 1em;
फ़ॉन्ट-फ़ैमिली: 'लुसीडा सैन्स', 'लुसीडा सैन्स रेगुलर', 'लुसीडा ग्रांडे',
'लुसीडा सैन्स यूनिकोड', जिनेवा, वर्दाना, सेन्स-सेरिफ़;
}
.अभिभावक-कंटेनर {
चौड़ाई: 72rem;
}
पी {
फ़ॉन्ट-आकार: 3em;
फ़ॉन्ट-शैली: बोल्ड;
}

छाया-प्रभाव लागू करना

।परछाई डालना {
फ़िल्टर: ड्रॉप-शैडो (0.5em 0.5em 0.1em #555);
}
।डब्बे की छाया {
बॉक्स-छाया: 0.5em 0.5em 0.1em #555;
}
।पाठ की छाया {
पाठ-छाया: 0.5em 0.5em 0.1em #555;
}

आउटपुट:

आप देख सकते हैं कि डब्बे की छाया की तुलना में भारी, गहरा छाया देता है पाठ की छाया तथा परछाई डालना. इसके अलावा, छाया के बीच की स्थिति में थोड़ा अंतर है पाठ की छाया तथा परछाई डालना. फिर भी, आप अपनी आवश्यकताओं के अनुसार अलग-अलग छाया प्रभाव पसंद कर सकते हैं।

ब्राउज़र समर्थन

NS परछाई डालना( ) इंटरनेट एक्सप्लोरर जैसे पुराने ब्राउज़रों को छोड़कर सभी आधुनिक ब्राउज़रों में फ़ंक्शन समर्थित है। हालांकि यह ऐसा कुछ नहीं है जो यूएक्स को गंभीर रूप से बाधित करेगा, आप एक के साथ एक फीचर क्वेरी जोड़ सकते हैं डब्बे की छाया मैदान छोड़ना।

विभिन्न छाया प्रभावों के साथ प्रयोग

की लोकप्रियता डब्बे की छाया उपयोग के मामलों की भीड़ के कारण काफी स्पष्ट है। हालांकि परछाई डालना( ) फ़ंक्शन का अत्यधिक कम उपयोग किया जाता है। हम आशा करते हैं कि आप विभिन्न छाया प्रभावों के साथ प्रयोग करेंगे और लागू करने का प्रयास करेंगे परछाई डालना आपकी भविष्य की परियोजनाओं में।

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

CSS बॉक्स-शैडो का उपयोग कैसे करें: 13 ट्रिक्स और उदाहरण

ब्लैंड बॉक्स उबाऊ लगते हैं। CSS बॉक्स-छाया प्रभाव के साथ उन्हें सजाना!

आगे पढ़िए

लेखक के बारे में