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

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

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

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

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

बॉक्स शैडो

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

टेक्स्ट शैडो

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 वैल्यू के एक से ज़्यादा इंस्टेंस जोड़कर. हर शैडो, आखिरी शैडो को पोज़िशनिंग रेफ़रंस पॉइंट के तौर पर इस्तेमाल करेगा.

देखें कि आपको कितना समझ आया है

परछाइयों के बारे में अपनी जानकारी को परखें