किसी एलिमेंट के पीछे धुंधलापन और रंग शिफ़्ट होना.
पहले, इन तकनीकों को वेब पर लागू करना मुश्किल था. इनके लिए, ठीक करने के तरीकों या तरीकों की ज़रूरत नहीं होती थी. हाल ही के सालों में, Safari और Edge, दोनों ने background-filter प्रॉपर्टी के ज़रिए ये सुविधाएं दी हैं. इस प्रॉपर्टी को -webkit-backdrop-filter प्रॉपर्टी के तौर पर भी इस्तेमाल किया जा सकता है. इस प्रॉपर्टी में, फ़िल्टर फ़ंक्शन के आधार पर, फ़ोरग्राउंड और बैकग्राउंड के रंगों को डाइनैमिक तरीके से ब्लेंड किया जाता है. अब Chrome में background-filter का इस्तेमाल किया जा सकता है. हालांकि, जो 76 या इसके बाद के वर्शन हैं.
backdrop-filter के लिए फ़िल्टर फ़ंक्शन का प्रदर्शन. CodePen पर यह उदाहरण आज़माएं.
ब्राउज़र समर्थन
परफ़ॉर्मेंस की वजह से, अगर backdrop-filter काम नहीं करता है, तो पॉलीफ़िल के बजाय इमेज पर वापस जाएं. यह उदाहरण नीचे दिया गया है.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
बुनियादी बातें
backdrop-filterप्रॉपर्टी किसी एलिमेंट पर एक या उससे ज़्यादा फ़िल्टर लागू करती है. इससे एलिमेंट के पीछे दिखने वाली कोई भी चीज़ बदल जाती है.- ओवरले करने वाले एलिमेंट का कुछ हिस्सा पारदर्शी होना चाहिए.
- ओवरले करने वाले एलिमेंट को नया स्टैकिंग कॉन्टेक्स्ट मिलेगा.
सीएसएस backdrop-filter, किसी ऐसे एलिमेंट पर एक या एक से ज़्यादा इफ़ेक्ट लागू करता है जो पारदर्शी या पारदर्शी हो. यह समझने के लिए, नीचे दी गई इमेज देखें.
.frosty-glass-pane {
backdrop-filter: blur(2px);
}
.frosty-glass-pane {
opacity: .9;
backdrop-filter: blur(2px);
}
बाईं ओर दी गई इमेज में दिखाया गया है कि अगर backdrop-filter का इस्तेमाल नहीं किया जाता या इसके साथ काम नहीं करता, तो ओवरलैप होने वाले एलिमेंट कैसे रेंडर होंगे. दाईं ओर मौजूद इमेज, backdrop-filter का इस्तेमाल करके धुंधला करने वाला इफ़ेक्ट लागू करती है. ध्यान दें कि यह backdrop-filter के साथ-साथ opacity का भी इस्तेमाल करता है. opacity के बिना, धुंधला करने की कोई कार्रवाई नहीं होगी. यह बिलकुल साफ़ नहीं है कि अगर opacity को 1 (पूरी तरह से ओपेक) पर सेट किया जाता है, तो बैकग्राउंड पर कोई असर नहीं पड़ेगा.
backdrop-filter प्रॉपर्टी, सीएसएस फ़िल्टर की तरह है और आपके सभी पसंदीदा फ़िल्टर फ़ंक्शन काम करते हैं: blur(), brightness(), contrast(), opacity(), drop-shadow() वगैरह. अगर आपको फ़िल्टर के तौर पर किसी बाहरी इमेज के साथ-साथ none, inherit, initial, और unset कीवर्ड का इस्तेमाल करना है, तो यह url() फ़ंक्शन के साथ भी काम करता है. MDN पर इन सभी चीज़ों के बारे में जानकारी दी गई है. इसमें सिंटैक्स, फ़िल्टर, और वैल्यू की जानकारी भी शामिल है.
जब backdrop-filter को none के अलावा किसी और पर सेट किया जाता है, तो ब्राउज़र एक नया स्टैकिंग कॉन्टेक्स्ट बनाता है. एक शामिल ब्लॉक भी बनाया जा सकता है, लेकिन सिर्फ़ तभी जब एलिमेंट में ऐब्सलूट और तय पोज़िशन डिसेंडेंट हों.
शानदार और शानदार इफ़ेक्ट के लिए अलग-अलग फ़िल्टर का इस्तेमाल किया जा सकता है. इसके अलावा, हल्के-फुल्के और सटीक इफ़ेक्ट के लिए सिर्फ़ एक फ़िल्टर का इस्तेमाल किया जा सकता है. इन्हें SVG फ़िल्टर के साथ भी जोड़ा जा सकता है.
उदाहरण
डिज़ाइन की तकनीकें और स्टाइल, जो पहले ऑपरेटिंग सिस्टम के लिए रिज़र्व थीं, अब वे अच्छा परफ़ॉर्म कर रही हैं और उन्हें एक ही सीएसएस की मदद से पूरा किया जा सकता है. आइए, कुछ उदाहरण देखते हैं.
एक फ़िल्टर
नीचे दिए गए उदाहरण में, कलर और ब्लर दोनों को मिलाकर फ़्रॉस्टेड इफ़ेक्ट किया गया है. धुंधला करने वाला यह इफ़ेक्ट backdrop-filter से मिलता है, जबकि रंग का इस्तेमाल एलिमेंट के सेमी-पारदर्शी बैकग्राउंड कलर से किया जाता है.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
एक से ज़्यादा फ़िल्टर
मनमुताबिक इफ़ेक्ट पाने के लिए, कभी-कभी आपको कई फ़िल्टर की ज़रूरत पड़ सकती है. ऐसा करने के लिए, स्पेस के हिसाब से अलग किए गए फ़िल्टर की सूची बनाएं. उदाहरण के लिए:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
नीचे दिए गए उदाहरण में, चार में से हर एक पैनल में बैकड्रॉप फ़िल्टर का एक अलग कॉम्बिनेशन है, जबकि उनके पीछे आकारों का समान सेट ही ऐनिमेशन के ज़रिए दिखाया गया है.
ओवरले
इस उदाहरण में, सेमी-ट्रांसपैरंट बैकग्राउंड को धुंधला करने का तरीका बताया गया है, ताकि टेक्स्ट को पढ़ने लायक बनाया जा सके. साथ ही, यह पेज के बैकग्राउंड के साथ स्टाइल के हिसाब से भी ब्लेंड हो जाए.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
डाइनैमिक बैकग्राउंड के लिए टेक्स्ट कंट्रास्ट
जैसा कि पहले बताया गया है, backdrop-filter ऐसे इफ़ेक्ट की अनुमति देता है जो वेब पर परफ़ॉर्म करना मुश्किल या नामुमकिन हो सकते हैं. इसका एक उदाहरण, किसी ऐनिमेशन के जवाब में बैकग्राउंड बदलना है. इस उदाहरण में, backdrop-filter टेक्स्ट के पीछे चल रही गतिविधियों के बावजूद, टेक्स्ट और उसके बैकग्राउंड के बीच ज़्यादा कंट्रास्ट बनाए रखता है. यह बैकग्राउंड के डिफ़ॉल्ट रंग darkslategray से शुरू होता है और बदलाव के बाद, रंगों को उलटने के लिए backdrop-filter का इस्तेमाल करता है.
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}
नतीजा
पिछले कुछ सालों में, आप में से 560 से ज़्यादा लोगों ने Chromium की गड़बड़ी को अपवोट किया है. साथ ही, इसे साफ़ तौर पर, सीएसएस सुविधा के तौर पर मार्क किया है, जिसका इंतज़ार किया जा रहा था. Chrome के backdrop-filter के वर्शन 76 में रिलीज़ होने से, वेब अब ओएस जैसे यूज़र इंटरफ़ेस (यूआई) प्रज़ेंटेशन के करीब आ गया है.