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

सीएसएस पॉडकास्ट - 017: Shadows

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

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

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

बॉक्स शैडो

ब्राउज़र सहायता

• 10
• 12
• 4
• 5.1

सोर्स

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;
}

बॉक्स-शैडो पर असर डालने वाली प्रॉपर्टी

अपने बॉक्स में 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;
}

टेक्स्ट शैडो

ब्राउज़र सहायता

• 2
• 12
• 3.5
• 1.1

सोर्स

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%);
}

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

box-shadow की तरह, text-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 बॉक्स शैडो का इस्तेमाल किया जा सकता है.

सही

इसके लिए कोई आधिकारिक सीमा तय नहीं है.

गलत

अपनी ज़रूरत के हिसाब से, एक से ज़्यादा बॉक्स शैडो जोड़ें.