परछाइयां हटाएं

CSS Podcast - 017: Shadows

मान लें कि आपको एक डिज़ाइन बनाने के लिए भेजा गया है और उस डिज़ाइन में एक टी-शर्ट की इमेज है, जिसे काटकर ड्रॉप शैडो के साथ दिखाया गया है. डिज़ाइनर आपको बताता है कि प्रॉडक्ट इमेज डाइनैमिक है और कॉन्टेंट मैनेजमेंट सिस्टम की मदद से उसे अपडेट किया जा सकता है. इसलिए, ड्रॉप शैडो भी डाइनैमिक होना चाहिए. टी-शर्ट के बजाय, इमेज में कोई विज़र, शॉर्ट या कोई अन्य आइटम हो सकता है. सीएसएस की मदद से, यह कैसे किया जा सकता है?

सीएसएस में, box-shadow और text-shadow प्रॉपर्टी होती हैं. हालांकि, इमेज टेक्स्ट नहीं होती, इसलिए text-shadow का इस्तेमाल नहीं किया जा सकता. box-shadow का इस्तेमाल करने पर, टी-शर्ट के आस-पास के बॉक्स पर छाया दिखती है, न कि टी-शर्ट के आस-पास.

हालांकि, एक और विकल्प है: drop-shadow() फ़िल्टर. इससे, आपको वही काम करने में मदद मिलती है जो डिज़ाइनर ने कहा है. सीएसएस में, शेडो के लिए कई विकल्प उपलब्ध हैं. हर विकल्प को किसी अलग इस्तेमाल के उदाहरण के लिए डिज़ाइन किया गया है.

बॉक्स शैडो

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.1.

Source

box-shadow प्रॉपर्टी, एचटीएमएल एलिमेंट के बॉक्स में शैडो जोड़ने के लिए है. यह ब्लॉक एलिमेंट और इनलाइन एलिमेंट पर काम करता है.

.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

box-shadow के लिए वैल्यू का क्रम इस तरह है:

  1. हॉरिज़ॉन्टल ऑफ़सेट: पॉज़िटिव संख्या, इसे बाईं ओर से बाहर धकेलती है और नेगेटिव संख्या, इसे दाईं ओर से बाहर धकेलती है.
  2. वर्टिकल ऑफ़सेट: पॉज़िटिव संख्या, इसे ऊपर से नीचे की ओर धकेलती है और नेगेटिव संख्या, इसे नीचे से ऊपर की ओर धकेलती है.
  3. धुंधला करने की त्रिज्या: ज़्यादा संख्या से, ज़्यादा धुंधला हुआ छाया बनता है, जबकि कम संख्या से, ज़्यादा साफ़ छाया बनती है.
  4. स्प्रेड रेडियस (ज़रूरी नहीं): ज़्यादा संख्या से छाया का साइज़ बढ़ता है और कम संख्या से यह कम हो जाता है. अगर ब्लेर रेडियस को 0 पर सेट किया गया है, तो छाया का साइज़ भी ब्लेर रेडियस के बराबर हो जाता है.
  5. रंग: रंग की कोई भी मान्य वैल्यू. अगर इसकी वैल्यू नहीं दी गई है, तो कैलकुलेट किए गए टेक्स्ट के रंग का इस्तेमाल किया जाएगा.

बॉक्स शैडो को डिफ़ॉल्ट आउटर शैडो के बजाय, इनर शैडो बनाने के लिए, अन्य प्रॉपर्टी के पहले inset कीवर्ड जोड़ें.

/* Outer shadow */
.my-element {
    box-shadow: 5px 5px 20px 5px #000;
}

/* Inner shadow */
.my-element {
    box-shadow: inset 5px 5px 20px 5px #000;
}

एक से ज़्यादा शैडो

box-shadow का इस्तेमाल करके, जितनी चाहें उतनी छायाएं जोड़ी जा सकती हैं. ऐसा करने के लिए, वैल्यू सेट का ऐसा कलेक्शन जोड़ें जिसमें वैल्यू को कॉमा लगाकर अलग किया गया हो:

.my-element {
  box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue,
    inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

box-shadow पर असर डालने वाली प्रॉपर्टी

अपने बॉक्स में border-radius जोड़ने से, बॉक्स की परछाई के आकार पर भी असर पड़ेगा. ऐसा इसलिए है, क्योंकि सीएसएस बॉक्स के आकार के आधार पर एक छाया बना रही है, जैसे कि उस पर लाइट पड़ रही हो.

.my-element {
  box-shadow: 0px 0px 20px 5px darkslateblue;
  border-radius: 25px;
}

अगर box-shadow वाला बॉक्स किसी ऐसे कंटेनर में है जिसमें overflow: hidden है, तो भी शैडो उस ओवरफ़्लो से बाहर नहीं निकलेगा.

<div class="my-parent">
  <div class="my-shadow">My shadow is hidden by my parent.</div>
</div>

.my-parent,
.my-shadow {
  width: 250px;
  height: 250px;
}

.my-shadow {
  box-shadow: 0px 0px 20px 5px darkslateblue;
}

.my-parent {
  overflow: hidden;
}

टेक्स्ट शैडो

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

text-shadow प्रॉपर्टी, box-shadow प्रॉपर्टी से काफ़ी मिलती-जुलती है. यह सिर्फ़ टेक्स्ट नोड पर काम करता है.

.my-element {
  text-shadow: 3px 3px 3px hotpink;
}

text-shadow की वैल्यू, box-shadow की वैल्यू के बराबर और उसी क्रम में होनी चाहिए. फ़र्क़ सिर्फ़ इतना है कि text-shadow में कोई spread वैल्यू और inset कीवर्ड नहीं है.

box-shadow जोड़ने पर, यह आपके बॉक्स के आकार में क्लिप हो जाता है, लेकिन text-shadow में क्लिपिंग नहीं होती. इसका मतलब है कि अगर आपका टेक्स्ट पूरी तरह या आधा पारदर्शी है, तो उसके पीछे की परछाई दिखती है.

.my-element {
  text-shadow: 3px 3px 3px gold;
  color: rgb(0 0 0 / 70%);
}

एक से ज़्यादा शैडो

text-shadow की मदद से, box-shadow की तरह ही जितनी चाहें उतनी शैडो जोड़ी जा सकती हैं. वैल्यू सेट का कॉमा से अलग किया गया कलेक्शन जोड़ें और 3D टेक्स्ट जैसे कुछ बेहतरीन टेक्स्ट इफ़ेक्ट बनाएं.

.my-element {
  text-shadow: 1px 1px 0px white,
    2px 2px 0px firebrick;
  color: darkslategray;
}

ड्रॉप शैडो

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

.my-image {
  filter: drop-shadow(0px 0px 10px rgba(0 0 0 / 30%))
}

drop-shadow फ़िल्टर में वही वैल्यू हैं जो box-shadow में हैं लेकिन inset कीवर्ड और spread वैल्यू की अनुमति नहीं है. filter प्रॉपर्टी में drop-shadow वैल्यू के कई इंस्टेंस जोड़कर, जितनी चाहें उतनी शैडो जोड़ी जा सकती हैं. हर शैडो, पोज़िशनिंग के रेफ़रंस पॉइंट के तौर पर पिछली शैडो का इस्तेमाल करेगी.

देखें कि आपको क्या समझ आया

छाया के बारे में अपनी जानकारी की जांच करना

यहां दी गई कौनसी शैडो वैल्यू, box-shadow के लिए यूनीक है?

हॉरिज़ॉन्टल ऑफ़सेट
फिर से कोशिश करें!
वर्टिकल ऑफ़सेट
फिर से कोशिश करें!
ब्लर रेडियस
फिर से कोशिश करें!
स्प्रेड रेडियस
🎉
रंग
फिर से कोशिश करें!
inset
फिर से कोशिश करें! inset एक कीवर्ड है, जो box-shadow के लिए भी यूनीक है.

किसी एलिमेंट पर एक बार में सिर्फ़ 13 बॉक्स शैडो इस्तेमाल किए जा सकते हैं.

सही
इसकी कोई आधिकारिक सीमा नहीं है.
गलत
ज़रूरत के मुताबिक जितनी चाहें उतनी बॉक्स शैडो जोड़ें.