बैकग्राउंड
फ़िल्टर इफ़ेक्ट का इस्तेमाल कुछ समय से किया जा रहा है. हालांकि, इन्हें SVG में काम करने के लिए डिज़ाइन किया गया था. ये इमेज को दस्तावेज़ में कॉम्पोज़ और रेंडर करने से पहले, उस पर कलर इंटेंसिटी, वॉर्पिंग या धुंधला करने जैसे इफ़ेक्ट लागू करने में काफ़ी असरदार हैं.
साल 2009 में Mozilla ने कहा था कि SVG काफ़ी नहीं है! उन्होंने फ़िल्टर को एक कदम आगे बढ़ाया और Firefox 3.5 में एचटीएमएल कॉन्टेंट पर फ़िल्टर इस्तेमाल करने की अनुमति दी. <video> पर चल रहे SVG फ़िल्टर का, पॉल आयरिश का शानदार डेमो देखें. यह सुविधा सिर्फ़ Firefox में काम करती है, लेकिन फिर भी यह सबसे बेहतर है.
आज
साल 2011 के आखिर तक, Adobe और अन्य कंपनियां इस बेहतरीन टेक्नोलॉजी को सीएसएस में शामिल करने के लिए लगातार काम कर रही थीं. खास तौर पर, मेरा मतलब CSS फ़िल्टर इफ़ेक्ट 1.0 से है, जिसे WebKit ने लागू करना शुरू कर दिया है.
सीएसएस में फ़िल्टर को सीधे चालू करने का मतलब है कि कोई भी डीओएम एलिमेंट उनका फ़ायदा ले सकता है! इमेज, <video>, <canvas> वगैरह.
वह
इस खास जानकारी में सीएसएस शेडर के बारे में भी बताया गया है. इससे सीएसएस में OpenGL शेडर टेक्नोलॉजी का इस्तेमाल किया जा सकेगा. यह बहुत ही दिलचस्प है! हालांकि, किसी सिस्टम का जीपीयू खोलने पर, सुरक्षा से जुड़ी बातों का ध्यान रखना ज़रूरी है. इस वजह से, फ़िलहाल WebKit में सिर्फ़ सीएसएस फ़िल्टर फ़ंक्शन लागू किए गए हैं.
सहायता
Chrome 18.0.976.0 (फ़िलहाल कैनरी), Webkit nightly
Webkit के नाइटली वर्शन में, हार्डवेयर से तेज़ किए गए कॉन्टेंट (जैसे, img { -webkit-transform: translateZ(0); } ) पर फ़िल्टर लागू किए जा सकते हैं. Chrome में, तेज़ किए गए कॉन्टेंट पर फ़िल्टर लागू करने की सुविधा अभी पूरी तरह से तैयार नहीं है. इसके लिए, --enable-accelerated-filters फ़्लैग का इस्तेमाल करें. इसमें <video> भी शामिल है, जो डिफ़ॉल्ट रूप से तेज़ी से चलता है.