CSS Box Shadow: एलिमेंट्स पर शैडो इफेक्ट्स बनाने का पूरा गाइड

CSS Box Shadow प्रॉपर्टी

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

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

Box Shadow सिंटैक्स

box-shadow: offset-x offset-y blur-radius spread color;

सिंटैक्स के घटक

• offset-x शैडो के लिए हॉरिजॉन्टल ऑफसेट है (आवश्यक)।
• offset-y शैडो के लिए वर्टिकल ऑफसेट है (आवश्यक)।
• blur-radius शैडो में जोड़ा गया ब्लर इफेक्ट है (वैकल्पिक)।
• spread ब्लर इफेक्ट की स्प्रेड रेडियस है (वैकल्पिक)।
• color शैडो का रंग है (वैकल्पिक, डिफ़ॉल्ट रूप से काला)।

Box Shadow के उदाहरण

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

<html>
  <div> 
    <p>This is a box.</p> 
  </div>
</html>

हमारे HTML एलिमेंट की निम्न स्टाइल है:

<style>
  div { 
    height: 100px; 
    width: 200px; 
    padding: 10px; 
    background-color: lightblue; 
  }
</style>

यह है कि हमारा डिफ़ॉल्ट बॉक्स कैसा दिखाई देता है:

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारा बॉक्स 100px चौड़ा और 200px लंबा है। हमारे बॉक्स के कंटेंट्स में 10px पैडिंग है, जिसका अर्थ है कि हमारे बॉक्स के अंदर टेक्स्ट और हमारे बॉक्स के बॉर्डर के बीच 10px गैप है। इसके अलावा, हमारा बॉक्स हल्का नीला है।

1. हॉरिजॉन्टल और वर्टिकल शैडो

box-shadow प्रॉपर्टी के साथ आप जो सबसे बेसिक शैडो बना सकते हैं वह हॉरिजॉन्टल और वर्टिकल शैडो है। यहां हमारे बॉक्स का एक उदाहरण है जिसमें हॉरिजॉन्टल और वर्टिकल शैडो है:

<style>
  div { 
    height: 100px; 
    width: 200px; 
    padding: 10px; 
    background-color: lightblue; 
  }
  div { box-shadow: 10px 10px; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारे कोड में, हमने offset-x और offset-y एट्रिब्यूट निर्दिष्ट किए और उन्हें दोनों को 10px पर सेट किया। यह एक ड्रॉप शैडो बनाता है जो काला है और दोनों एक्सिस पर 10 पिक्सेल्स से ऑफसेट है, जैसा कि आप ऊपर देख सकते हैं।

2. शैडो कलर्स (Shadow Colors)

आप color एट्रिब्यूट का उपयोग करके शैडो को रंग निर्दिष्ट कर सकते हैं। मान लीजिए हम चाहते हैं कि हमारी शैडो हल्की ग्रे हो। हम निम्न कोड का उपयोग करके अपने बॉक्स-शैडो का रंग बदल सकते हैं:

<style>
  div { 
    height: 100px; 
    width: 200px; 
    padding: 10px; 
    background-color: lightblue; 
  }
  div { box-shadow: 10px 10px lightgray; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारे बॉक्स में अब हल्की ग्रे शैडो है।

3. शैडो ब्लर इफेक्ट (Shadow Blur Effect)

blur-radius एट्रिब्यूट का उपयोग शैडो में ब्लर इफेक्ट जोड़ने के लिए किया जाता है। मान लीजिए हम चाहते हैं कि हमारी शैडो में 3px ब्लर हो, जो इसे थोड़ा धुंधला बना देगा। हम बॉक्स के लिए ब्लर को परिभाषित करने के लिए निम्न कोड का उपयोग कर सकते हैं:

<style>
  div { 
    height: 100px; 
    width: 200px; 
    padding: 10px; 
    background-color: lightblue; 
  }
  div { box-shadow: 10px 10px 3px lightgray; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

यह बॉक्स हमारे पिछले उदाहरण के समान है, लेकिन यदि आप शैडो को ध्यान से देखते हैं तो आप देख सकते हैं कि यह थोड़ा धुंधला है।

4. स्प्रेड इफेक्ट (Spread Effect)

जब आप box-shadow प्रॉपर्टी का उपयोग कर रहे होते हैं, तो आप अपनी शैडो में स्प्रेड रेडियस जोड़ सकते हैं। यह परिभाषित करता है कि शैडो सभी दिशाओं में कितना फैल सकती है। मान लीजिए हम चाहते हैं कि हमारी शैडो अपने चारों ओर 5px फैल जाए। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

<style>
  div { 
    height: 100px; 
    width: 200px; 
    padding: 10px; 
    background-color: lightblue; 
  }
  div { box-shadow: 10px 10px 5px 5px lightgray; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

इस उदाहरण में, हमारी शैडो थोड़ी लंबी है। ऐसा इसलिए है क्योंकि हमारे द्वारा निर्दिष्ट स्प्रेड रेडियस के कारण हमारी शैडो 5px से बढ़ा दी गई है।

हमारे कोड में, हमारे द्वारा निर्दिष्ट एट्रिब्यूट्स निम्न क्रम में क्रमबद्ध हैं:

1. offset-x
2. offset-y
3. blur
4. radius
5. color

5. मल्टीपल शैडोज़ (Multiple Shadows)

box-shadow प्रॉपर्टी का उपयोग किसी एलिमेंट पर मल्टीपल शैडोज़ जोड़ने के लिए किया जा सकता है। यदि आप किसी एलिमेंट पर मल्टीपल शैडोज़ जोड़ना चाहते हैं, तो आप ऊपर दिए गए सिंटैक्स का उपयोग कर सकते हैं और अपनी शैडोज़ को कॉमा का उपयोग करके अलग कर सकते हैं। मल्टीपल शैडोज़ बनाने का सिंटैक्स इस प्रकार है:

box-shadow: shadow1, shadow2;

जब आप मल्टीपल शैडोज़ के साथ काम कर रहे होते हैं, तो प्रत्येक शैडो के लिए ऑफसेट वैल्यूज़ अलग होनी चाहिए। अन्यथा, आपकी शैडोज़ ओवरलैप हो जाएंगी और केवल पहली शैडो जिसे विशेष ऑफसेट वैल्यूज़ का सेट असाइन किया गया है, दिखाई देगी।

मान लीजिए हम अपने बॉक्स के पीछे हल्की ग्रे और गुलाबी दोनों शैडोज़ चाहते हैं। हम निम्न कोड का उपयोग करके ये शैडोज़ बना सकते हैं:

<style>
  div { 
    height: 100px; 
    width: 200px; 
    padding: 10px; 
    background-color: lightblue; 
  }
  div { box-shadow: 5px 5px lightgray, 10px 10px pink; }
</style>

6. इनसेट शैडोज़ (Inset Shadows)

inset कीवर्ड का उपयोग शैडो को एलिमेंट के अंदर दिखाने के लिए किया जा सकता है। मान लीजिए हम चाहते हैं कि हमारी हल्की ग्रे शैडो हमारे बॉक्स के अंदर दिखाई दे। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

<style>
  div { 
    height: 100px; 
    width: 200px; 
    padding: 10px; 
    background-color: lightblue; 
  }
  div { box-shadow: 5px 5px lightgray inset; }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

inset कीवर्ड हमें अपनी शैडो को बाहरी शैडो से आंतरिक शैडो में बदलने की अनुमति देता है जैसा कि आप ऊपर देख सकते हैं।

Box Shadow एट्रिब्यूट्स रेफरेंस टेबल

CSS box-shadow प्रॉपर्टी के साथ उपयोग किए जा सकने वाले कई एट्रिब्यूट्स हैं। यहां इन एट्रिब्यूट्स की एक रेफरेंस टेबल है:

निष्कर्ष

CSS box-shadow प्रॉपर्टी का उपयोग HTML एलिमेंट्स पर शैडो इफेक्ट्स जोड़ने के लिए किया जाता है।

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