ड्रॉप शैडो एक ऐसा प्रभाव है जो वेबपेज पर प्रस्तुत किए जाने पर चयनित HTML तत्वों के पीछे एक छाया को गिराता या जोड़ता है। इस प्रभाव को 'का उपयोग करके प्राप्त किया जा सकता है। परछाई डालना() 'सीएसएस के लिए मूल्य के रूप में विधि' फ़िल्टर 'संपत्ति या' का उपयोग करना डब्बे की छाया ' संपत्ति। 'बॉक्स-शैडो' संपत्ति का उपयोग करके, विज़ुअल एन्हांसमेंट, उपयोगकर्ता अनुभव, जोर और फ़ोकस को एक विशिष्ट लक्षित HTML तत्व के लिए तैयार किया जा सकता है।
यह मार्गदर्शिका बॉक्स-शैडो गुण का उपयोग करके ड्रॉप शैडो प्रभाव बनाने की प्रक्रिया को प्रदर्शित करती है:
-
- बॉक्स-शैडो गुण का उपयोग करके एक ठोस ड्रॉप शैडो बनाएं
- बॉक्स-शैडो गुण का उपयोग करके ब्लरी ड्रॉप शैडो बनाएं
- ड्रॉप शैडो क्षेत्र का विस्तार करें
CSS3 में बॉक्स-शैडो प्रॉपर्टी का उपयोग करके ड्रॉप शैडो कैसे बनाएं?
' डब्बे की छाया ” संपत्ति डेवलपर को पृष्ठ पर तत्वों की सापेक्ष स्थिति का संकेत देकर एक दृश्य पदानुक्रम स्थापित करने की अनुमति देती है। इसका उपयोग करके, वेब पेज निर्माता सतहों पर छाया डालने वाली वस्तुओं का भ्रम पैदा कर सकते हैं, तत्वों को अधिक संवादात्मक अनुभव दे सकते हैं।
वाक्य - विन्यास
“बॉक्स-शैडो” गुण का सिंटैक्स है:
डब्बे की छाया: [ क्षैतिज ऑफसेट ] [ ऊर्ध्वाधर ऑफसेट ] [ धुंधला त्रिज्या ] [ प्रसार त्रिज्या ] [ रंग ] ;
उपरोक्त सिंटैक्स में प्रयुक्त शब्दों की व्याख्या:
-
- प्रारंभ में, ' क्षैतिज ऑफसेट 'एक्स-अक्ष स्थिति को पुनः प्राप्त / संग्रहीत करता है, और' नकारात्मक ” मूल्य छाया को बाईं ओर सेट करता है और इसके विपरीत।
- ' ऊर्ध्वाधर ऑफसेट ' मान Y-अक्ष स्थिति को संग्रहीत करता है, ' सकारात्मक 'मान छाया को नीचे की दिशा में सेट करता है, और इसके विपरीत' के मामले में नकारात्मक ' कीमत।
- अगला, ' धुंधला त्रिज्या ” मूल्य जैसा कि नाम से है छाया का धुंधलापन सेट करता है।
- ' प्रसार त्रिज्या ” मान निर्दिष्ट करता है कि छाया को कितनी त्रिज्या का विस्तार करना चाहिए।
- ' रंग 'छाया का रंग सेट करता है, यह' में हो सकता है एचएसएल ' या ' आरजीबी 'प्रारूप भी।
अब, बेहतर समझ के लिए कुछ उदाहरणों पर चलते हैं:
उदाहरण 1: बॉक्स-शैडो गुण का उपयोग करके सॉलिड ड्रॉप शैडो लागू करें
सॉलिड ड्रॉप शैडो को सेट करने के लिए, केवल दिशाएँ और शैडो कलर को मान के रूप में डाला जाता है ' डब्बे की छाया ' संपत्ति:
< शैली >.boxShadowExample {
चौड़ाई: 210 पीएक्स;
बॉर्डर: 2px सॉलिड कॉर्नसिल्क;
ऊंचाई: 210 पीएक्स;
पृष्ठभूमि का रंग: #f0f0f0;
बॉक्स-शैडो: 10px 10px फ़ॉरेस्टग्रीन;
}
शैली >
उपरोक्त कोड में:
-
- सबसे पहले, HTML तत्व को 'की एक श्रेणी के साथ चुना गया है' boxShadowExample ”। और 'का मूल्य 210 पीएक्स 'को प्रदान किया जाता है' ऊंचाई ' और ' चौड़ाई ' गुण। इसके अलावा, 'का उपयोग करें सीमा ' और ' पृष्ठभूमि का रंग 'बेहतर दृश्यता के लिए गुण।
- अगला, का मान सेट करें ' 10 पीएक्स 10 पीएक्स फॉरेस्टग्रीन ' तक ' डब्बे की छाया 'सीएसएस संपत्ति। ' 10 पीएक्स 'क्षैतिज और ऊर्ध्वाधर ऑफ़सेट है जो उस स्थान को निर्धारित करता है जहां छाया को लागू करने की आवश्यकता होती है। और यह ' हरे जंगल 'छाया का रंग है।
संकलन के बाद, वेबपेज इस तरह दिखाई देता है:
आउटपुट पुष्टि करता है कि बॉक्स-शैडो गुण का उपयोग करके एक ठोस प्रकार की ड्रॉप शैडो को रखा गया है।
उदाहरण 2: बॉक्स-शैडो गुण का उपयोग करके ब्लरी ड्रॉप शैडो लागू करें
पहले से लागू छाया को धुंधला करने के लिए, 'के लिए रंग से पहले एक और संख्यात्मक मान डाला जाता है' डब्बे की छाया ' संपत्ति। नीचे अपडेट किए गए कोड पर जाएं:
< शैली >.boxShadowExample {
चौड़ाई: 210 पीएक्स;
बॉर्डर: 2px सॉलिड कॉर्नसिल्क;
ऊंचाई: 210 पीएक्स;
पृष्ठभूमि-रंग: सफ़ेद धुआँ;
बॉक्स-शैडो: 10px 10px 15px फ़ॉरेस्टग्रीन;
}
शैली >
उपरोक्त कोड के अनुसार, छाया अब ' 15 पीएक्स 'धुंधला। संकलन चरण के अंत के बाद, वेबपेज इस तरह दिखता है:
उपरोक्त आंकड़ा दिखाता है कि छाया अब धुंधली हो गई है।
उदाहरण 3: ड्रॉप शैडो क्षेत्र का विस्तार करना
प्रसार मूल्य प्रदान किया जाता है ' डब्बे की छाया ” संपत्ति छाया के क्षेत्र का विस्तार करने के लिए। प्रसार का मान संख्यात्मक स्वरूप में होना चाहिए। नीचे दिए गए कोड स्निपेट की तरह, छाया क्षेत्र का विस्तार ' 20 पीएक्स ':
< शैली >.boxShadowExample {
चौड़ाई: 210 पीएक्स;
बॉर्डर: 2px सॉलिड कॉर्नसिल्क;
ऊंचाई: 210 पीएक्स;
पृष्ठभूमि-रंग: सफेद धुआँ;
बॉक्स-शैडो: 10px 10px 15px 20px फ़ॉरेस्टग्रीन;
}
शैली >
निष्पादन के बाद, ड्रॉप शैडो अब इस तरह दिखाई देता है:
जैसा कि आप देख सकते हैं कि छाया का क्षेत्र अब 20px बढ़ गया है।
निष्कर्ष
' डब्बे की छाया 'संपत्ति का उपयोग' के निर्माण के लिए किया जाता है परछाई डालना ” चयनित HTML तत्वों पर प्रभाव। ' परछाई डालना 'संपत्ति पांच मान स्वीकार करती है,' क्षैतिज ऑफसेट ”, “ ऊर्ध्वाधर ऑफसेट ”, “ धुंधला त्रिज्या ”, “ प्रसार त्रिज्या ' और ' रंग ”। 'क्षैतिज ऑफसेट' और 'ऊर्ध्वाधर ऑफसेट' मान छाया के लिए आयाम निर्धारित करते हैं जहां से ड्रॉप छाया उभरनी चाहिए। 'धुंधला त्रिज्या' मान छाया को धुंधला बनाता है और 'प्रसार त्रिज्या' मान छाया के क्षेत्र को बढ़ाता है।