सीएसएस फ़िल्टर के असर को समझना

शुरुआती जानकारी

फ़िल्टर एक बेहतरीन टूल है. वेब लेखक इसका इस्तेमाल करके, दिलचस्प विज़ुअल इफ़ेक्ट पा सकते हैं. इस लेख में, हम फ़िल्टर के इतिहास के बारे में बताएंगे. साथ ही, यह भी बताएंगे कि फ़िल्टर कैसे काम करते हैं और इनका इस्तेमाल कैसे किया जा सकता है. हम कुछ उदाहरणों के साथ, सीएसएस के लिए तय किए गए सभी पहले से तय फ़िल्टर के उदाहरण देंगे. हम डेस्कटॉप और मोबाइल डिवाइसों पर उनका इस्तेमाल करने के लिए, परफ़ॉर्मेंस से जुड़ी बातों पर भी चर्चा करेंगे. ऐसा इसलिए, क्योंकि अच्छे उपयोगकर्ता अनुभव के लिए फ़िल्टर के असर के बारे में जानना ज़रूरी है. आखिर में, हम मॉडर्न ब्राउज़र में लागू किए जाने की मौजूदा स्थिति की समीक्षा करेंगे.

फ़िल्टर इफ़ेक्ट का पिछला, मौजूदा, और आने वाला समय

फ़िल्टर इफ़ेक्ट, स्केलेबल वेक्टर ग्राफ़िक (SVG) स्पेसिफ़िकेशन के हिस्से के तौर पर बनाए गए हैं. उन्हें वेक्टर ड्रॉइंग पर कई अलग-अलग पिक्सल आधारित इमेज इफ़ेक्ट लागू करने के लिए बनाया गया था. समय के साथ, जैसे-जैसे ब्राउज़र वेंडर ने अपने ब्राउज़र में SVG सुविधाएं जोड़ी, वैसे-वैसे फ़िल्टर की ज़रूरत होने लगी. Mozilla के रॉबर्ट ओ'कॉलाहन ने 'सामान्य' एचटीएमएल कॉन्टेंट पर सीएसएस ऐप्लिकेशन के ज़रिए SVG फ़िल्टर का इस्तेमाल करने का शानदार आइडिया आया. रॉबर्ट ने एक शुरुआती वर्शन का प्रोटोटाइप बनाया था. इससे पता चला कि फ़िल्टर और सीएसएस स्टाइल का कॉम्बिनेशन कितना असरदार हो सकता है. W3C में, सीएसएस और SVG के काम करने वाले ग्रुप ने सीएसएस स्टाइल की मदद से, एचटीएमएल और SVG, दोनों के लिए फ़िल्टर के इस्तेमाल को एक जैसा बनाने का फ़ैसला किया. इस तरह, सीएसएस के लिए 'फ़िल्टर' प्रॉपर्टी बनाई गई. इस समय, सीएसएस और SVG पर काम करने वाले लोगों की एक टास्क फ़ोर्स, फ़िल्टर को सभी के लिए मददगार बनाने के लिए बहुत काम कर रही है. इन सभी चीज़ों की मौजूदा स्पेसिफ़िकेशन यहां देखी जा सकती है.

'फ़िल्टर' सीएसएस प्रॉपर्टी की नई लाइफ़

सीएसएस स्टाइल में 'फ़िल्टर' देखने पर, कभी-कभी डेजा वू ने वेब डेवलपर के ख़िलाफ़ शिकायत की. ऐसा इसलिए है, क्योंकि Internet Explorer के पुराने वर्शन में प्लैटफ़ॉर्म के हिसाब से काम करने के लिए, सीएसएस की मदद से 'फ़िल्टर' प्रॉपर्टी को दिखाया गया था. इसे स्टैंडर्ड 'फ़िल्टर' प्रॉपर्टी के लिए कर दिया गया है, जो अब CSS3 का हिस्सा है. इसलिए, अगर आपको कुछ पुराने वेब पेजों पर 'फ़िल्टर' दिख रहा है, तो गुमराह होने की कोई ज़रूरत नहीं है. नई 'फ़िल्टर' प्रॉपर्टी वह जगह है जहां पूरी कार्रवाई होती है और IE के नए वर्शन इसे सभी मॉडर्न ब्राउज़र की तरह ही लागू कर रहे हैं.

फ़िल्टर कैसे काम करते हैं

आइए जानते हैं कि फ़िल्टर असल में क्या करता है? किसी फ़िल्टर के बारे में सोचने का सबसे आसान तरीका पोस्ट प्रोसेसिंग चरण है, जो आपके पेज का पूरा कॉन्टेंट तैयार करने और ड्रॉ करने के बाद कुछ शानदार काम करता है.

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

इसका मतलब है कि फ़िल्टर वाला पेज बनाते समय काफ़ी समय लगता है. हालांकि, इनका सही तरीके से इस्तेमाल करने से आपकी साइट की स्पीड पर बहुत कम असर पड़ेगा.

इसके अलावा, जिस तरह कैमरा लेंस पर, कई फ़िल्टर को एक-दूसरे के सामने स्टैक किया जा सकता है उसी तरह, हर तरह के इफ़ेक्ट को पाने के लिए, एक के बाद एक मनमुताबिक फ़िल्टर लागू किए जा सकते हैं.

SVG और CSS का इस्तेमाल करके तय किए गए फ़िल्टर

फ़िल्टर मूल रूप से SVG से आए हैं, इसलिए उन्हें तय करने और इस्तेमाल करने के अलग-अलग तरीके हैं. SVG में एक <filter> एलिमेंट होता है, जो एक्सएमएल सिंटैक्स का इस्तेमाल करके अलग-अलग फ़िल्टर इफ़ेक्ट की परिभाषाओं को पूरा करता है. सीएसएस के तय किए गए फ़िल्टर के सेट को उसी ग्राफ़िक मॉडल का इस्तेमाल किया जाता है. हालांकि, ये ज़्यादा आसान परिभाषाएं होती हैं, जिनका इस्तेमाल स्टाइल शीट में आसानी से किया जा सकता है.

ज़्यादातर सीएसएस फ़िल्टर को SVG फ़िल्टर के तौर पर दिखाया जा सकता है. साथ ही, सीएसएस की मदद से, SVG में दिए गए किसी फ़िल्टर का रेफ़रंस भी दिया जा सकता है. सीएसएस फ़िल्टर डिज़ाइनर ने वेब लेखकों के लिए, फ़िल्टर आसानी से लागू करने में बहुत मेहनत की है. इसलिए, इस लेख में कुछ समय के लिए SVG परिभाषाओं को अनदेखा करते हुए, सीधे सीएसएस से मिलने वाले फ़िल्टर के बारे में बताया गया है.

सीएसएस फ़िल्टर लागू करने का तरीका

सीएसएस के फ़िल्टर इस्तेमाल करने के लिए, आपके वेब पेज पर दिखने वाले किसी भी एलिमेंट पर लागू की गई 'फ़िल्टर' प्रॉपर्टी का इस्तेमाल किया जाता है. एक बहुत आसान उदाहरण के लिए, आप कुछ इस तरह लिख सकते हैं

div { { % mixin filter: grayscale(100%); % } }

और इससे पेज पर मौजूद सभी <div>एलिमेंट के अंदर का कॉन्टेंट स्लेटी रंग का हो जाएगा. अपने पेज को 1940 के दशक की टीवी इमेज जैसा बनाने के लिए बेहतरीन.

ज़्यादातर फ़िल्टर, किसी न किसी रूप में पैरामीटर के हिसाब से फ़िल्टर करते हैं. उदाहरण के लिए, अगर आपको अपने कॉन्टेंट को ओरिजनल रंग और ग्रेस्केल वर्शन के बीच के हिस्से में रखना है, तो ऐसा करें:

div { { % mixin filter: grayscale(50%); % } }

अगर आपको एक के बाद कई अलग-अलग फ़िल्टर लगाने हैं, तो यह आसान है - उन्हें सीएसएस में इस तरह से लगाएं:

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

वह उदाहरण सबसे पहले सभी मूल रंग को ग्रेस्केल बनाएगा और फिर सेपिया इफ़ेक्ट लागू करेगा, जिससे यह ऐसा दिखेगा:

एक के बाद एक फ़िल्टर लागू करने पर, हर तरह के इफ़ेक्ट इस्तेमाल किए जा सकते हैं - बेहतरीन नतीजे पाने के लिए एक्सपेरिमेंट करना, आपकी कल्पना पर निर्भर करता है.

सीएसएस का इस्तेमाल करने पर कौनसे फ़िल्टर इफ़ेक्ट उपलब्ध हैं

इस तरह, मूल SVG फ़िल्टर का इस्तेमाल करना बहुत मुश्किल है, लेकिन साथ ही इसका इस्तेमाल करना भी मुश्किल हो सकता है. इस वजह से, सीएसएस कई तरह के स्टैंडर्ड फ़िल्टर इफ़ेक्ट उपलब्ध कराता है. इनसे, इन इफ़ेक्ट को इस्तेमाल करना बहुत आसान हो जाता है.

आइए, इन सभी पर नज़र डालते हैं और देखते हैं कि वे क्या करते हैं.

ग्रेस्केल(रकम)

इससे हमारी इनपुट इमेज के रंग, स्लेटी रंग के शेड में बदल जाते हैं. लागू की गई ‘रकम’ से यह कंट्रोल होता है कि कितना ग्रे कन्वर्ज़न लागू किया जाए. अगर यह 100% है, तो सब कुछ धूसर रंग में दिखेगा, अगर 0% है, तो रंगों में कोई बदलाव नहीं होगा. अगर प्रतिशत के बजाय कोई फ़्लोटिंग पॉइंट नंबर इस्तेमाल किया जा सकता है, तो इसका मतलब है कि 0, 0% की तरह काम करता है और 1.0, 100% के बराबर काम करता है.

सेपिया(रकम)

इससे पुरानी फ़ोटो की तरह ही, सेपिया टिंग में पास किए गए रंग मिलते हैं. लागू की गई 'रकम', 'ग्रेस्केल' फ़िल्टर की तरह ही काम करती है. जैसे कि 100% का इस्तेमाल करने पर, सभी रंगों को पूरी तरह से सेपिया टोन में बनाया जाता है. वहीं, छोटी वैल्यू को भी कम अनुपात में लागू किया जाता है.

संतृप्त(रकम)

इससे रंगों को गहरा या फीका करने में मदद मिलती है, जिससे वे ज़्यादा चमकदार दिखते हैं. यह एक शानदार इफ़ेक्ट है जो फ़ोटो को पोस्टर या कार्टून जैसा बना सकता है.इस इफ़ेक्ट से आप रंग को गहरा या फीका करने के लिए 100% से ज़्यादा वैल्यू का इस्तेमाल भी कर सकते हैं. बिलकुल एक ऐसा इफ़ेक्ट जो चीज़ों को मज़ेदार बना सकता है!

रंग बदलना(कोण)

यह एक अलग तरह का कलर गीक इफ़ेक्ट है, जिसका इस्तेमाल दिलचस्प नतीजे पाने के लिए किया जा सकता है. यह इनपुट इमेज को पूरी तरह से अलग दिखाने के लिए रंगों को बदलता है. अगर आप कलर व्हील के चारों ओर लाल से बैंगनी रंग में जाने वाले कलर स्पेक्ट्रम की कल्पना कर सकते हैं, तो यह इफ़ेक्ट व्हील पर मौजूद मूल रंग को इनपुट के रूप में ले लेता है और व्हील पर मौजूद रंग बनाने के लिए उसे 'ऐंगल' पैरामीटर की मदद से घुमाता है, जिस पर वह आउटपुट कलर की वैल्यू के रूप में घूमता है. इसलिए इमेज में मौजूद सभी रंग व्हील पर एक ही 'ऐंगल' से शिफ़्ट हो गए हैं. बेशक, यह एक बेहद आसान तरीका है, जिसके ज़रिए हम अपने काम को ज़्यादा बेहतर तरीके से समझ पाएंगे.

इनवर्ट(रकम)

इस इफ़ेक्ट से अलग-अलग रंग दिखते हैं. इसलिए, अगर 'रकम' का इस्तेमाल किया जाता है, तो 100% आउटपुट, पुराने दिनों में रिकॉर्ड हुए कैमरों के हिसाब से नेगेटिव बैक जैसा दिखता है! पहले की तरह ही, 100% से छोटी वैल्यू का इस्तेमाल करने पर भी इन्वर्टेड इफ़ेक्ट लागू होगा.

ओपैसिटी(रकम)

अगर आपको किसी वीडियो को फ़िल्टर करके सेमी-पारदर्शी दिखाना है, तो यह आपके लिए है. 'रकम' मान तय करता है कि आउटपुट कितना ओपेक होगा. इसलिए, 100% की वैल्यू पूरी तरह से ओपेक है, इसलिए आउटपुट बिलकुल इनपुट के जैसा होगा. जैसे-जैसे वैल्यू 100% से कम होती जाएगी, आउटपुट इमेज कम ओपेक (ज़्यादा पारदर्शी) हो जाएगी. साथ ही, आपको इमेज का कम से कम हिस्सा दिखेगा. इसका मतलब है कि अगर यह पेज पर किसी और चीज़ को ओवरलैप करता है, तो नीचे दी गई चीज़ें दिखने लगेंगी. वैल्यू को 0% पर सेट करने का मतलब है कि यह पूरी तरह से हट जाएगी. हालांकि, ध्यान रखें कि आपको अब भी पूरी तरह से पारदर्शी ऑब्जेक्ट पर, माउस क्लिक वगैरह जैसे इवेंट मिल सकते हैं. अगर आपको बिना कोई आइटम दिखाए, क्लिक किया जा सकने वाला कोई एरिया बनाना है, तो यह एक आसान तरीका है.

यह प्रॉपर्टी, उस ‘ओपेसिटी’ प्रॉपर्टी की तरह ही काम करती है जिसके बारे में आपको पहले से पता है. आम तौर पर, सीएसएस की 'अपारदर्शिता' प्रॉपर्टी को हार्डवेयर से तेज़ी से नहीं किया जाता है. हालांकि, हार्डवेयर से तेज़ी लाने का इस्तेमाल करके फ़िल्टर लागू करने वाले कुछ ब्राउज़र बेहतर परफ़ॉर्मेंस के लिए, ओपैसिटी के फ़िल्टर वर्शन को तेज़ कर देंगे.

चमक(रकम)

यह बिलकुल आपके टीवी की स्क्रीन की रोशनी को कंट्रोल करने की तरह है. यह ‘रकम’ पैरामीटर के अनुपात में, रंगों को पूरी तरह से काले और मूल रंग के बीच अडजस्ट करता है. अगर इसे 0% पर सेट किया जाता है, तो आपको काले रंग के अलावा और कुछ नहीं दिखेगा, लेकिन जैसे-जैसे वैल्यू 100% तक बढ़ती है, मूल इमेज ज़्यादा से ज़्यादा और ज़्यादा चमकदार होती जाएगी. ऐसा तब तक होगा, जब तक कि इसे 100% पर सेट नहीं किया जाता और यह इनपुट इमेज के बराबर है. बिलकुल, आप वीडियो अपलोड करना जारी रख सकते हैं - इसलिए, अगर इमेज को 200% पर सेट कर दिया जाता है, तो वह मूल इमेज से दोगुनी हो जाएगी - कम रोशनी वाले शॉट को अडजस्ट करने के लिए यह एक बेहतरीन विकल्प है!

कंट्रास्ट(रकम)

टीवी सेट से ज़्यादा कंट्रोल! इससे इनपुट इमेज के सबसे गहरे और हल्के हिस्सों के बीच का फ़र्क़ बदल जाएगा. अगर 0% का इस्तेमाल किया जाता है, तो काले रंग में दिखता है, ठीक वैसे ही जैसे कि 'चमक' दिखती है. इसलिए, यह ज़्यादा दिलचस्प नहीं है. हालांकि, वैल्यू को 100% बढ़ाने पर, अंधेरे में आने वाला अंतर 100% तक बदल जाता है और यह ओरिजनल इमेज फिर से दिखने लगती है. आप इस इफ़ेक्ट के लिए 100% से ज़्यादा भी कर सकते हैं, जो हल्के और गहरे रंगों के बीच अंतर को और भी ज़्यादा बढ़ा देता है.

ब्लर(दायरा)

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

drop-shadow(shadow)

अपने कॉन्टेंट को ऐसा बनाने की प्रोसेस आपको बहुत अच्छी लगती है कि यह सूरज की रोशनी में न हो और उसके पीछे ज़मीन पर परछाई हो. यही बात ‘ड्रॉप-शैडो’ बनाने का काम करती है. यह इमेज का स्नैपशॉट लेता है, उसे एक ही रंग में बदल देता है, धुंधला कर देता है, और फिर नतीजे को इस तरह ऑफ़सेट कर देता है कि वह ओरिजनल कॉन्टेंट की परछाई जैसा लगे. इसमें पास किया गया 'शैडो' पैरामीटर सिर्फ़ एक वैल्यू से ज़्यादा जटिल है. यह वैल्यू की सीरीज़ होती है और उन्हें स्पेस देकर अलग किया जाता है. साथ ही, कुछ वैल्यू ज़रूरी नहीं होती! 'शैडो' की वैल्यू से यह कंट्रोल होता है कि शैडो कहां रखा जाएगा, कितना धुंधला किया जाएगा, शैडो का रंग क्या होगा वगैरह. 'शैडो' वैल्यू क्या काम करती हैं, इस बारे में पूरी जानकारी के लिए, CSS3 बैकग्राउंड की जानकारी में ‘बॉक्स-शैडो’ के बारे में पूरी जानकारी दी गई है. नीचे दिए गए कुछ उदाहरणों से आपको इस बारे में अच्छी तरह पता चल जाना चाहिए कि अलग-अलग संभावनाएं क्या हैं.

यह फ़िल्टर करने की एक और कार्रवाई है, जो 'box-Shadow' प्रॉपर्टी में उपलब्ध सीएसएस के मौजूदा फ़ंक्शन की तरह ही है. फ़िल्टर करने के तरीके का इस्तेमाल करने का मतलब है कि इसमें कुछ ब्राउज़र से हार्डवेयर की रफ़्तार बढ़ सकती है, जैसा कि हमने ऊपर ‘ओपैसिटी’ ऑपरेशन के लिए बताया था.

SVG फ़िल्टर का संदर्भ देने वाला यूआरएल

फ़िल्टर SVG के हिस्से के तौर पर बनाए गए हैं, इसलिए सिर्फ़ SVG फ़िल्टर का इस्तेमाल करके, अपने कॉन्टेंट को स्टाइल देना चाहिए. 'फ़िल्टर' प्रॉपर्टी के मौजूदा प्रस्ताव के साथ यह आसान है. SVG में सभी फ़िल्टर को एक ‘आईडी’ एट्रिब्यूट के साथ तय किया जाता है. इसका इस्तेमाल, फ़िल्टर इफ़ेक्ट का रेफ़रंस देने के लिए किया जा सकता है. इसलिए, सीएसएस के किसी भी SVG फ़िल्टर का इस्तेमाल करने के लिए, आपको बस ‘url’ सिंटैक्स का इस्तेमाल करके, उसका रेफ़रंस देना होगा.

उदाहरण के लिए, किसी फ़िल्टर के लिए SVG मार्कअप कुछ इस तरह हो सकता है:

<filter id="foo">...</filter>

तो सीएसएस से आप इस तरह से आसान काम कर सकते हैं:

div { { % mixin filter: url(#foo); % } }

और वॉइला! आपके दस्तावेज़ में मौजूद सभी <div> को SVG फ़िल्टर की परिभाषाओं के मुताबिक स्टाइल किया जाएगा.

पसंद के मुताबिक (जल्द आ रहा है)

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

प्रदर्शन संबंधी विचार

सभी वेब डेवलपर को अपने वेब पेज या ऐप्लिकेशन की परफ़ॉर्मेंस का ध्यान रखना चाहिए. सीएसएस फ़िल्टर, विज़ुअल इफ़ेक्ट के लिए एक बेहतरीन टूल हैं. हालांकि, इनसे आपकी साइट की परफ़ॉर्मेंस पर भी असर पड़ सकता है.

यह समझना ज़रूरी है कि वे क्या करते हैं और इससे परफ़ॉर्मेंस पर क्या असर पड़ता है. खास तौर पर तब, जब आपको अपनी साइट को मोबाइल डिवाइसों पर अच्छी तरह से काम करना हो, लेकिन उसके लिए सीएसएस फ़िल्टर का इस्तेमाल किया जा सके.

सबसे पहले, सभी फ़िल्टर एक जैसे नहीं बनाए जाते! असल में, ज़्यादातर फ़िल्टर किसी भी प्लैटफ़ॉर्म पर तेज़ी से काम करते हैं और इनकी परफ़ॉर्मेंस पर बहुत कम असर होता है. हालांकि, किसी भी तरह का धुंधला करने वाले फ़िल्टर, दूसरे फ़िल्टर की तुलना में ज़्यादा धीमे काम करते हैं. इसका मतलब है ‘धुंधला’ और ‘ड्रॉप-शैडो’. इसका मतलब यह नहीं है कि आपको इनका इस्तेमाल नहीं करना चाहिए, बल्कि यह समझना चाहिए कि वे कैसे काम करते हैं.

जब blur का इस्तेमाल किया जाता है, तो यह आउटपुट पिक्सल के चारों तरफ़ पिक्सल के रंगों को मिला देता है, ताकि धुंधला नतीजा जनरेट किया जा सके. इसलिए, मान लें कि अगर आपका radius पैरामीटर 2 है, तो मिले-जुले रंग जनरेट करने के लिए फ़िल्टर को हर आउटपुट पिक्सल के चारों ओर हर दिशा में 2 पिक्सल देखने होंगे. ऐसा हर आउटपुट पिक्सल के लिए होता है. इसका मतलब है कि कई बार कैलकुलेशन करने पर, radius को बढ़ाया जा सकता है. blur हर दिशा में देखता है, इसलिए 'दायरा' को दोगुना करने का मतलब है कि आपको चार गुना ज़्यादा पिक्सल देखने होंगे, इसलिए असल में यह radius के हर डबल होने पर चार गुना धीमा हो जाएगा. drop-shadow फ़िल्टर के इफ़ेक्ट के तौर पर blur शामिल होता है. इसलिए, यह भी shadow पैरामीटर के radius और spread हिस्सों को बदलने पर, blur की तरह काम करता है.

blur में कुछ भी नहीं होता है, क्योंकि कुछ प्लैटफ़ॉर्म पर जीपीयू का इस्तेमाल करके उनकी रफ़्तार बढ़ाई जा सकती है. हालांकि, ऐसा ज़रूरी नहीं है कि यह सभी ब्राउज़र में उपलब्ध हो. जब भी आपको शक हो, तब सबसे बेहतर तरीका यह है कि आप उस ‘दायरे’ के साथ प्रयोग करें जो आपको मनमुताबिक नतीजे देता है. इसके बाद, बेहतर विज़ुअल इफ़ेक्ट को बनाए रखते हुए इसे जितना हो सके उतना कम करें. इस तरह ट्यून करने से आपके उपयोगकर्ताओं को खास तौर पर तब ज़्यादा खुशी होगी, जब वे आपकी साइट को फ़ोन से इस्तेमाल करें.

अगर SVG फ़िल्टर का रेफ़रंस देने वाले url फ़िल्टर का इस्तेमाल किया जा रहा है, तो उनमें किसी भी तरह का आर्बिट्रेरी फ़िल्टर इफ़ेक्ट हो सकता है, इसलिए पक्का करें कि उन्हें भी धीमा किया जा सकता है. इसलिए, पक्का करें कि आपको पता हो कि फ़िल्टर इफ़ेक्ट क्या करता है. साथ ही, मोबाइल डिवाइस पर एक्सपेरिमेंट करके पक्का करें कि परफ़ॉर्मेंस ठीक हो.

आधुनिक ब्राउज़र में उपलब्धता

फ़िलहाल, WebKit पर आधारित ब्राउज़र और Mozilla के साथ कुछ सीएसएस filter इफ़ेक्ट उपलब्ध कराए जा रहे हैं. हमें उम्मीद है कि ये जल्द ही ऑपरा के साथ-साथ IE10 में भी उपलब्ध होंगे. हालांकि, अभी स्पेसिफ़िकेशन पर काम किया जा रहा है, लेकिन कुछ ब्राउज़र वेंडर ने वेंडर प्रीफ़िक्स का इस्तेमाल करके, इस कॉन्टेंट को लागू किया है. इसलिए, WebKit में आपको -webkit-filter का इस्तेमाल करना होगा और Mozilla में -moz-filter का इस्तेमाल करना होगा. साथ ही, ब्राउज़र लागू करने के दूसरे तरीकों पर नज़र बनाए रखना होगा.

सभी ब्राउज़र में सभी फ़िल्टर इफ़ेक्ट तुरंत काम नहीं करते. इसलिए, आपका माइलेज अलग-अलग होगा. फ़िलहाल, Mozilla ब्राउज़र, वेंडर प्रीफ़िक्स के बिना सिर्फ़ filter: url() फ़ंक्शन के साथ काम करता है, क्योंकि यह लागू करने से अन्य इफ़ेक्ट फ़ंक्शन की तारीख पहले की हो जाती है.

हमने अलग-अलग ब्राउज़र में उपलब्ध सीएसएस फ़िल्टर के असर की खास जानकारी नीचे दी है. साथ ही, हमने रफ़ परफ़ॉर्मेंस इंडिकेटर की मदद से यह पता लगाया है कि उन्हें सॉफ़्टवेयर में कब इस्तेमाल किया जाता है. ध्यान दें, कई आधुनिक ब्राउज़र इन्हें हार्डवेयर में लागू करना शुरू कर रहे हैं (GPU Accelerated). जब इन्हें जीपीयू के साथ काम करता है, तो धीमे इफ़ेक्ट के लिए परफ़ॉर्मेंस बहुत बेहतर हो जाती है. हमेशा की तरह, अलग-अलग ब्राउज़र पर टेस्ट करना, परफ़ॉर्मेंस को जांचने का सबसे अच्छा तरीका है.

फ़िल्टर इफ़ेक्ट	ब्राउज़र समर्थन	परफ़ॉर्मेंस
सलेटीपट्टी	Chrome	बहुत तेज़
सेपिया	Chrome	बहुत तेज़
गहरे और फीके रंगों वाली आर्ट	Chrome	बहुत तेज़
रंग बदलना	Chrome	तेज़
इनवर्ट	Chrome	बहुत तेज़
opacity	Chrome	धीमा हो सकता है
स्क्रीन की रोशनी	Chrome	तेज़
कंट्रास्ट	Chrome	तेज़
blur	Chrome	रफ़्तार धीमी होने तक धीमा
drop-shadow	Chrome	धीमा हो सकता है
यूआरएल()	Chrome, Mozilla	बदलता है, तेज़ से धीमा

अन्य अच्छे संसाधन

फ़िल्टर के साथ इंटरैक्टिव ऐब्स्ट्रैक्ट पेंटिंग ऐप्लिकेशन, जिससे आपको अपने आर्टवर्क को प्रयोग करने और उसे शेयर करने की सुविधा मिलती है एरिक बिडलमैन का बेहतरीन इंटरैक्टिव फ़िल्टर पेज ज़रूर देखें उदाहरणों के साथ फ़िल्टर के बारे में ट्यूटोरियल आधिकारिक W3C फ़िल्टर इफ़ेक्ट 1.0 ड्राफ़्ट की खास बातें http://dev.w3.org/fxtf/filters/ फ़िल्टर का इस्तेमाल करके बनाए गए यूज़र इंटरफ़ेस (यूआई)