बैकड्रॉप फ़िल्टर का इस्तेमाल करके, ओएस-स्टाइल वाले बैकग्राउंड बनाएं

किसी एलिमेंट के पीछे धुंधला करने और रंग बदलने की सुविधा.

Adam Argyle

Joe Medley

पहले, इन तकनीकों को वेब पर लागू करना मुश्किल था. इसके लिए, हैक या वर्कअराउंड की ज़रूरत होती थी. हाल ही के सालों में, Safari और Edge, दोनों ने background-filter प्रॉपर्टी के ज़रिए ये सुविधाएं दी हैं. इस प्रॉपर्टी को -webkit-backdrop-filter प्रॉपर्टी के तौर पर भी इस्तेमाल किया जा सकता है. इस प्रॉपर्टी में, फ़िल्टर फ़ंक्शन के आधार पर, फ़ोरग्राउंड और बैकग्राउंड के रंगों को डाइनैमिक तरीके से ब्लेंड किया जाता है. अब Chrome में background-filter का इस्तेमाल किया जा सकता है. हालांकि, जो 76 या इसके बाद के वर्शन हैं.

ब्राउज़र समर्थन

परफ़ॉर्मेंस की वजहों से, backdrop-filter के काम न करने पर, पॉलीफ़िल के बजाय इमेज का इस्तेमाल करें. यह उदाहरण नीचे दिया गया है.

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

बुनियादी बातें

• backdrop-filter प्रॉपर्टी, किसी एलिमेंट पर एक या उससे ज़्यादा फ़िल्टर लागू करती है. इससे, एलिमेंट के पीछे मौजूद किसी भी चीज़ का रंग बदल जाता है.
• ओवरले करने वाला एलिमेंट, कम से कम कुछ हद तक पारदर्शी होना चाहिए.
• ओवरले करने वाले एलिमेंट को स्टैकिंग का नया कॉन्टेक्स्ट मिलेगा.

CSS 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() वगैरह. अगर आपको फ़िल्टर के तौर पर किसी बाहरी इमेज का इस्तेमाल करना है, तो url() फ़ंक्शन का इस्तेमाल किया जा सकता है. साथ ही, none, inherit, initial, और unset कीवर्ड का भी इस्तेमाल किया जा सकता है. 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 के 76 वर्शन में backdrop-filter की रिलीज़, वेब को ऑपरेटिंग सिस्टम जैसे यूज़र इंटरफ़ेस (यूआई) प्रज़ेंटेशन के एक कदम करीब लाती है.

अन्य संसाधन

• खास जानकारी
• Chrome प्लैटफ़ॉर्म का स्टेटस
• एमडीएन
• background-filter CSS Tricks पर
• Codepen पर सैंपल