धुंधला करना और किसी एलिमेंट के पीछे का रंग बदलना.
पहले इन तकनीकों का इस्तेमाल करके, उन्हें वेब पर लागू करना मुश्किल था. इसलिए, इन तकनीकों के लिए सटीक हैकिंग या समाधान की ज़रूरत भी नहीं पड़ती थी. हाल ही के कुछ सालों में, Safari और Edge, दोनों ने background-filter प्रॉपर्टी के ज़रिए ये सुविधाएं दी हैं. इसके अलावा, -webkit-backdrop-filter भी ऐसा किया गया है जो फ़िल्टर फ़ंक्शन के आधार पर, फ़ोरग्राउंड और बैकग्राउंड के रंगों को डाइनैमिक तरीके से ब्लेंड करता है. अब Chrome, वर्शन 76 से background-filter पर काम करता है.
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() फ़ंक्शन के साथ भी काम करता है. एमडीएन पर इन सभी बातों के लिए जवाब होते हैं. इसमें सिंटैक्स, फ़िल्टर, और वैल्यू की जानकारी भी शामिल है.
जब 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 में रिलीज़ होने से, वेब पर ओएस जैसे यूज़र इंटरफ़ेस (यूआई) प्रज़ेंटेशन ज़्यादा करीब आ गए हैं.