WebKit में सीएसएस फ़िल्टर इफ़ेक्ट का लैंडिंग

बैकग्राउंड

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

हालांकि, साल 2009 में Mozilla ने कहा था कि SVG फ़ाइल काफ़ी नहीं है! उन्होंने एक और कदम आगे जाकर फ़िल्टर को इस्तेमाल किया और Firefox 3.5 में उन्हें एचटीएमएल कॉन्टेंट पर अनुमति दी. <video> में पॉल आइरिश का SVG फ़िल्टर का टाइमलेस डेमो देखें. फिर से, केवल Firefox में काम करता है लेकिन फिर भी चलता है.

आज

साल 2011 के आखिर तक Adobe (साथ ही अन्य) ने इस शानदार टेक्नोलॉजी को सीएसएस में लाने के लिए कड़ी मेहनत की है. खास तौर पर, मेरा मतलब सीएसएस फ़िल्टर इफ़ेक्ट 1.0 से है. WebKit ने इसे लागू करना शुरू कर दिया है.

सीधे सीएसएस में फ़िल्टर चालू करने का मतलब है कि करीब-करीब सभी DOM एलिमेंट का फ़ायदा मिल सकता है! इमेज, <video>, <canvas>, कोई नाम रखें.

सीएसएस के फ़िल्टर इफ़ेक्ट का डेमो.

वह

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

सपोर्ट करें

Chrome 18.0.976.0 (फ़िलहाल कैनरी), Webkit का एक रात का किराया

Webkit नाइटली में, हार्डवेयर की मदद से तेज़ी से कॉन्टेंट दिखाने वाले कॉन्टेंट ( जैसे कि img { -webkit-transform: translateZ(0); }) पर फ़िल्टर लगाए जा सकते हैं. Chrome में, एक्सेलरेटेड कॉन्टेंट पर फ़िल्टर लगाने पर अब भी काम चल रहा है (--enable-accelerated-filters फ़्लैग का इस्तेमाल करें). इसमें <video> भी शामिल है, जो डिफ़ॉल्ट रूप से एक्सेलरेटेड है.