Adobe, Apple और Opera ने संयुक्त रूप से एक ब्राउज़र में उच्च-गुणवत्ता वाले वीडियो प्रभाव उत्पन्न करने के लिए
CSS शेडर्स विनिर्देश विकसित किए हैं, और फ़िल्टर किसी भी HTML तत्व पर लागू किए जा सकते हैं। वे उन सभी से परिचित हैं जिन्होंने फ्लैश एनीमेशन संपादक में प्रभाव लागू किया था, या उन लोगों के लिए जो एसवीजी के लिए
फ़िल्टर प्रभाव 1.0 मानक से
filter तत्व जानते हैं। यहाँ वही है, केवल बेहतर है।
CSS Shaders एल्गोरिथ्म इस प्रकार है: एक बहुभुज जाल किसी भी HTML या SVG तत्व (चरण 1) पर आरोपित है, जिसके साथ वर्टेडर शेडर काम करता है, जैसा कि WebGL में है। ऑब्जेक्ट को तीन-आयामी स्थान (चरण 2) में परिवर्तित किया जा सकता है, जिसके बाद रेंडरिंग किया जाता है, अर्थात, रेखापुंज ग्राफिक्स (चरण 3) में अनुवाद।
CSS Shaders डेमो पर कुछ फ़िल्टर WebGL कार्यक्षमता की नकल करते हैं। आश्चर्य नहीं कि CSS Shaders को उसी
OpenGL Shading Language में WebGL shaders के रूप में लिखा गया है। हालाँकि, मूलभूत अंतर यह है कि WebGL केवल
canvas माध्यम से और पूर्वनिर्धारित प्रभावों के साथ काम करता है, लेकिन CSS Shaders अधिक सार्वभौमिक हैं, क्योंकि आप अपना फ़िल्टर लिख सकते हैं, इसे एक स्टाइलशीट के माध्यम से लोड कर सकते हैं और इसे पृष्ठ पर किसी भी तत्व पर लागू कर सकते हैं।
CSS Shaders Developers ने SVG फ़िल्टर (
फ़िल्टर इफेक्ट्स 1.0 ) के विनिर्देशों से बहुत अधिक उधार लिया है। मुख्य अंतर यह है कि उन्होंने
filter तत्व के लिए एक
custom() फ़ंक्शन जोड़ा, जिसके माध्यम से आप मनमाने ढंग से प्रभाव गुणों को निर्दिष्ट कर सकते हैं। ऐसा लगता है कि एक ट्रिफ़ल आपको मौलिक रूप से उच्च स्तर के प्रभाव बनाने की अनुमति देता है। इसका उदाहरण निम्नलिखित उदाहरण से दिया जा सकता है।
यहां एक विशिष्ट फ़िल्टर प्रभाव 1.0 सेट कैसा दिखता है।
इस उदाहरण के लिए कोड:
<html> <head> ... <style> #shaded { filter: grayscale(1); transition: filter ease-in 0.3s; } #shaded:hover { filter: grayscale(0); } </style> </head> <body> <div id="shaded"> <div id="multi-col"> <h2>The Creative Web</h2> <p>Lorem ipsum dolor ... </p> <img id="png-img" src="planes.jpg"/> <p>Mauris at ... </p> <img id="svg-img" src="picture.svg" /> <p>Morbi congue ....</p> <img id="css3-img" src="html5_css3_styling.svg" /> </div> </div> </body> </html>
फ़िल्टर इफेक्ट्स की सुंदरता सीएसएस के साथ अपने सरल वाक्यविन्यास और एकीकरण में निहित है। लेकिन इन फिल्टर की क्षमताएं बहुत सीमित हैं,
filter लिए केवल नौ पूर्वनिर्धारित प्रभाव विनिर्देशों में पंजीकृत हैं:
- धुंधला (5, 5)
- ड्रॉप-शैडो (10, 5, 5)
- ह्यू-रोटेट (328deg)
- संतृप्त (5)
- पलटना (1)
- ग्रेस्केल (1)
- अपारदर्शिता (0.5)
- गामा (1.1, 3.6, 0)
- सेपिया (0.5)
ऐसे मापदंडों के साथ फिल्टर लगाने का परिणाम चित्रण में दिखाया गया है।
और यह सब, वहाँ कोई अन्य फ़िल्टर नहीं हैं। CSS Shaders एक पूरी तरह से अलग मामला है।
custom() के लिए धन्यवाद
custom() आप अतिरिक्त प्रभाव जोड़ सकते हैं। उदाहरण के लिए, काले और सफेद से रंग में चित्र का रूपांतरण तस्वीर के एक मामूली झुकाव और "लहर" प्रभाव से पूरक होता है, जब रंग धीरे-धीरे नीचे से ऊपर की ओर चित्र भरता है।
सहमत हूँ, एक अंतर है।
कोड:
<html> <head> ... <style> #shaded { filter: custom(url('wobble.vs') /* wobble effect */ url('color-swipe.fs'), /* swipe effect */ 40 40, /* mesh lines/cols */ amplitude 60, /* wobble strength */ amount 0.0); /* effect amount */ transition: filter ease-in-out 2s; ...; } #shaded:hover { filter: custom(url('wobble.vs') url('color-swipe.fs'), 40 40, amplitude 60, amount 1.0); } </style> </head> <body> <div id="shaded"> <div id="multi-col"> <h2>The Creative Web</h2> <p>Lorem ipsum dolor ... </p> <img id="png-img" src="planes.jpg"/> <p>Mauris at ... </p> <img id="svg-img" src="picture.svg" /> <p>Morbi congue ....</p> <img id="css3-img" src="html5_css3_styling.svg" /> </div> </div> </body> </html>
नियमित HTML सामग्री पर CSS शेडर्स का उपयोग करने के कुछ उदाहरण यहां दिए गए हैं।
CSS Shaders का ड्राफ्ट W3C कंसोर्टियम पर विचार के लिए प्रस्तुत किया गया था, यह ज्ञात नहीं है कि व्यवसाय कितने समय तक बाहर निकलेगा। अब Adobe, Apple और Opera WebKit इंजन में शामिल करने के लिए CSS Shaders को बढ़ावा देने की कोशिश कर रहे हैं। ऐसा होने तक, Adobe डेवलपर्स को डेमो वीडियो रिकॉर्ड करने के लिए क्रोमियम के अपने स्वयं के निर्माण को संकलित करना पड़ा।
सीएसएस शेड्स के विस्तृत अवलोकन के लिए, साथ ही शेडर्स लिखने के लिए उदाहरण, एडोब डेवलपर कनेक्शन पर
विंसेंट हार्डी का लेख देखें।
पुनश्च इस प्रकार, एडोब उन तकनीकों को जारी करता है जो फ्लैश को दफनाने की संभावना रखते हैं। यह होशपूर्वक किया जाता है : हर कोई समझता है कि भविष्य एचटीएमएल 5 है, और कंपनी के पास ज्वार के खिलाफ तैरने के लिए दिमाग नहीं है।