सीएसएस बॉक्स छाया

जब आप सीएसएस में एक तत्व डिजाइन कर रहे हैं, तो आप यह तय कर सकते हैं कि आप उस तत्व के फ्रेम के चारों ओर एक छाया प्रभाव बनाना चाहते हैं। उदाहरण के लिए, आप एक ऐसी छवि बनाना चाह सकते हैं जिसमें छवि के नीचे एक छाया हो।

यहीं पर CSS box-shadow गुण उपयोगी हो सकता है। बॉक्स-छाया गुण आपको किसी तत्व के फ्रेम के चारों ओर छाया प्रभाव जोड़ने की अनुमति देता है। यह ट्यूटोरियल उदाहरणों के साथ चर्चा करेगा कि वेब तत्वों में छाया प्रभाव जोड़ने के लिए CSS बॉक्स-शैडो प्रॉपर्टी का उपयोग कैसे करें।

CSS बॉक्स शैडो

बॉक्स-छाया गुण तत्व में छाया जोड़ता है। बॉक्स-छाया गुण लगभग किसी भी HTML तत्व पर लागू किया जा सकता है, और संपत्ति का उपयोग उन तत्वों के साथ भी किया जा सकता है जिनमें गोल कोने होते हैं।

बॉक्स-शैडो प्रॉपर्टी का सिंटैक्स इस प्रकार है:

बॉक्स-छाया:ऑफ़सेट-एक्स ऑफ़सेट-वाई ब्लर-रेडियस स्प्रेड कलर;

आइए इस सिंटैक्स को तोड़ें और प्रत्येक तत्व पर चर्चा करें:

• offset-x छाया के लिए क्षैतिज ऑफसेट है (आवश्यक)।
• offset-y छाया के लिए लंबवत ऑफसेट है (आवश्यक)।
• धुंधला-त्रिज्या छाया में जोड़ा गया धुंधला प्रभाव है (वैकल्पिक)।
• स्प्रेड धुंधला प्रभाव (वैकल्पिक) का फैलाव त्रिज्या है।
• रंग छाया का रंग है (वैकल्पिक, डिफ़ॉल्ट रूप से काला)।

अब जब हम बॉक्स-शैडो प्रॉपर्टी के सिंटैक्स को जानते हैं, तो हम एक्शन में प्रॉपर्टी के कुछ उदाहरणों का पता लगा सकते हैं। नीचे दिए गए उदाहरणों में, हम निम्नलिखित HTML तत्व का उपयोग करने जा रहे हैं जिसे हम स्टाइल करना चाहते हैं:

 

यह एक बक्सा है।

हमारे HTML तत्व की शैली निम्न है:

 

यह एक बॉक्स है।