[अनुवाद] सीएसएस फिल्टर

DOM तत्वों पर लागू होने पर विभिन्न दृश्य प्रभाव प्रदान करने के लिए CSS फ़िल्टर बनाए गए थे। इस लेख में हम फिल्टर के इतिहास के बारे में बात करेंगे कि वे क्या करते हैं और उन्हें कैसे लागू करें। हम डेस्कटॉप और मोबाइल डिवाइस दोनों पर प्रदर्शन पर उनके प्रभाव पर भी विचार करते हैं।

अतीत, वर्तमान, और फिल्टर का भविष्य

फिल्टर एसवीजी विनिर्देश के हिस्से के रूप में बनाए गए थे। उनका काम वेक्टर ग्राफिक्स के लिए पिक्सेल ग्रिड प्रभाव लागू करना था। समय के साथ, इंटरनेट ब्राउज़र एसवीजी समर्थन के साथ संपन्न हो गए और फिल्टर की उपयोगिता स्पष्ट हो गई। मोज़िला के रॉबर्ट ओ'कलाहान ने सीएसएस में एसवाईजी फ़िल्टर को डोम तत्वों में लागू करने के विचार का वर्णन किया। उन्होंने एक उदाहरण बनाया जिसमें उन्होंने दिखाया कि CSS के साथ संयोजन में SVG प्रभाव को लागू करना कितना आसान हो सकता है। सीएसएस और एसवीजी काम करने वाले समूह एक नई सीएसएस फिल्टर संपत्ति बनाने के लिए एक साथ आए। इस विनिर्देशन के लिए प्रलेखन यहाँ है ।

फिल्टर संपत्ति का नया जीवन

कभी-कभी इंटरनेट पर एक पृष्ठ के सीएसएस कोड को देखते हुए, आप अक्सर इस संपत्ति पर आते हैं। लेकिन ज्यादातर मामलों में, यह संपत्ति इंटरनेट एक्सप्लोरर के पुराने संस्करणों के लिए लिखी गई है, यह ब्राउज़र में लागू कुछ प्रभावों को नियंत्रित करती है। यह संपत्ति मानक के पक्ष में छोड़ दी गई थी, जो पहले से ही CSS3 के विनिर्देश का हिस्सा है।

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

फ़िल्टर क्या करते हैं? आप कल्पना कर सकते हैं कि यह एक तरह की पोस्ट-प्रक्रिया है, जो पेज पर आने के बाद तत्वों के साथ अद्भुत काम करती है।

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

एसवीजी और सीएसएस का उपयोग करके फिल्टर का विवरण

फ़िल्टर का वर्णन करने और लागू करने के कई तरीके हैं। एसवीजी स्वयं एक तत्व है जिसमें एक्सएमएल सिंटैक्स का उपयोग करके फ़िल्टर का वर्णन किया गया है। सीएसएस शैलियों का उपयोग करके फिल्टर का विवरण समान परिणाम देता है, लेकिन सीएसएस सिंटैक्स के लिए धन्यवाद यह विधि बहुत सरल है।

अधिकांश मानक CSS फ़िल्टर को SVG का उपयोग करके भी वर्णित किया जा सकता है, और CSS आपको SVG प्रारूप में वर्णित फ़िल्टर को संदर्भित करने की भी अनुमति देता है। यहां हम केवल CSS में उपलब्ध फिल्टर के बारे में बात करेंगे।

सीएसएस फिल्टर का उपयोग कैसे करें

फ़िल्टर पृष्ठ पर किसी भी दृश्य तत्व पर लागू किया जा सकता है।

div { filter: grayscale(100%); }

यह उदाहरण टैग के अंदर की सामग्री को b / w में बदल देगा।



प्रत्येक फ़िल्टर में एक पैरामीटर होता है जो आपको फ़िल्टर की ताकत बदलने की अनुमति देता है।

div { filter: grayscale(50%); }



आप एक ही समय में कई फ़िल्टर लागू कर सकते हैं।

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

CSS में उपयोग के लिए कौन से फ़िल्टर उपलब्ध हैं

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

रंगों को b / w में परिवर्तित करता है। मान प्रतिशत (0% - 100%) और दशमलव अंशों (0 - 1) दोनों में निर्दिष्ट किया गया है।



सेपिया (मूल्य)

एक सीपिया प्रभाव बनाता है। मान प्रतिशत (0% - 100%) और दशमलव अंशों (0 - 1) दोनों में निर्दिष्ट किया गया है।



संतृप्त (मान)

रंग संतृप्ति को नियंत्रित करता है। मान प्रतिशत (0% - 100%) और दशमलव अंशों (0 - 1) दोनों में निर्दिष्ट किया गया है।



ह्यू-रोटेट (कोण)

दिए गए कोण के आधार पर छवि का रंग बदलता है। रोटेशन कोण यह निर्धारित करता है कि यह रंग लाल से बैंगनी तक रंग के पहिया में कितना बदल जाएगा। मान डिग्री (0deg - 360deg) में सेट किया गया है।



पलटना (मूल्य)

रंगों को निकालता है। मान प्रतिशत (0% - 100%) और दशमलव अंशों (0 - 1) दोनों में निर्दिष्ट किया गया है।



अपारदर्शिता (मूल्य)

आइटम की पारदर्शिता सेट करता है। मान प्रतिशत (0% - 100%) और दशमलव अंशों (0 - 1) दोनों में निर्दिष्ट किया गया है।

यह फ़िल्टर CSS opacity प्रॉपर्टी के समान ही काम करता है। अंतर केवल इतना है कि फ़िल्टर हार्डवेयर त्वरण का समर्थन करता है, लेकिन गुण नहीं करता है। इस प्रकार, एक फिल्टर का उपयोग अधिक प्रदर्शन देगा।



चमक (मान)

छवि की चमक को बदलता है। मान दोनों प्रतिशत (0% और अधिक), और दशमलव अंशों (0 और अधिक) में निर्दिष्ट किया गया है।



इसके विपरीत (मान)

छवि के विपरीत परिवर्तन। मान दोनों प्रतिशत (0% और अधिक), और दशमलव अंशों (0 और अधिक) में निर्दिष्ट किया गया है।



धब्बा (त्रिज्या)

एक धब्बा प्रभाव बनाता है। मान पिक्सेल (px) में निर्दिष्ट किया गया है।



ड्रॉप-छाया (x, y, त्रिज्या, रंग)

CSS बॉक्स-शैडो प्रॉपर्टी के समान एक छाया बनाता है, लेकिन केवल फ़िल्टर में हार्डवेयर त्वरण समर्थन होता है। मान समकक्ष के CSS मानों के समान सेट किए जाते हैं।

drop-shadow(16px 16px 20px black);



filter: drop-shadow(inset 0 0 2rm blue);



url (SVG फ़िल्टर का लिंक)

आप SVG फ़िल्टर तत्व का उपयोग करके अपने स्वयं के फ़िल्टर बना सकते हैं और उन्हें CSS से संदर्भित कर सकते हैं। प्रत्येक फ़िल्टर की अपनी आईडी होती है ।

एसवीजी:

  <फ़िल्टर आईडी = "फू"> ... </ फ़िल्टर> 

सीएसएस:

div { filter: url(#foo); }

कस्टम (जल्द ही आ रहा है)

निकट भविष्य में, सीएसएस शेडर्स का उपयोग करके अपने स्वयं के फिल्टर बनाने की क्षमता उपलब्ध हो जाएगी।

उत्पादकता

CSS फ़िल्टर शानदार दृश्य प्रभाव प्रदान करते हैं, लेकिन साथ ही साथ आपकी वेबसाइट के प्रदर्शन पर प्रतिकूल प्रभाव डालते हैं। यह समझना महत्वपूर्ण है कि वे क्या कर रहे हैं और यह प्रदर्शन को कैसे प्रभावित करता है।

अधिकांश फ़िल्टर किसी भी उपकरण पर बहुत तेजी से काम करते हैं जो उनका समर्थन करता है। हालाँकि, धब्बा और ड्रॉप-शैडो फ़िल्टर जो धब्बा प्रभाव का उपयोग करते हैं, वे दूसरों की तुलना में बहुत धीमा हैं। वे वास्तव में कैसे काम करते हैं?

जब आप एक धब्बा फ़िल्टर लागू करते हैं, तो यह प्रत्येक पिक्सेल के चारों ओर पिक्सेल के रंगों को मिश्रित करता है, इस प्रकार एक धब्बा प्रभाव बनाता है। उदाहरण के लिए, यदि आप 2px का त्रिज्या सेट करते हैं, तो फ़िल्टर सभी दिशाओं में दो पिक्सेल का चयन करेगा और उनके रंगों को मिलाएगा, और इसी तरह प्रत्येक पिक्सेल के लिए। त्रिज्या जितनी बड़ी होगी, प्रभाव की गणना करने में उतना ही अधिक समय लगेगा। चूंकि फ़िल्टर सभी दिशाओं में पिक्सेल का चयन करता है, धब्बा त्रिज्या में 2 गुना की वृद्धि के साथ, पिक्सेल की संख्या 4 गुना बढ़ जाती है। इसका मतलब यह है कि गणना समय को ठीक 4 गुना अधिक की आवश्यकता होगी। ड्रॉप-शैडो फ़िल्टर में एक धब्बा फ़िल्टर होता है।

आप इन फ़िल्टर को उन प्लेटफ़ॉर्म पर सुरक्षित रूप से उपयोग कर सकते हैं जो हार्डवेयर त्वरण प्रदान करते हैं, लेकिन हर ब्राउज़र इसका समर्थन नहीं करता है। इस मामले में, यह प्रयोग करने योग्य है और वांछित परिणाम प्राप्त करने के बाद, दृश्य प्रभाव के गंभीर नुकसान के बिना जितना संभव हो सके धुंधला त्रिज्या को कम करने का प्रयास करें।

कस्टम एसवीजी फिल्टर का उपयोग करते समय, सुनिश्चित करें कि उनमें ऐसे प्रभाव नहीं हैं जो प्रदर्शन को प्रतिकूल रूप से प्रभावित कर सकते हैं।

अनुकूलता

अधिकांश CSS फ़िल्टर अब FireFox और WebKit ब्राउज़रों में उपयोग के लिए उपलब्ध हैं। हम जल्द ही ओपेरा और IE10 ब्राउज़रों में समर्थन देखने की उम्मीद करते हैं। चूंकि विनिर्देश अभी भी विकास के अधीन है, इसलिए हमें विक्रेता उपसर्गों का उपयोग करना होगा। WebKit -webkit-Filter के लिए, FireFox के लिए किसी उपसर्ग की आवश्यकता नहीं है।

नीचे ब्राउज़र संगतता फ़िल्टर की एक तालिका है।

उपयोगी लिंक

हम CSS फ़िल्टर का उपयोग करते हैं।
क्या हुआ देखने के लिए स्लाइडर्स को स्थानांतरित करें।
उदाहरण के साथ ट्यूटोरियल।
आधिकारिक W3C फ़िल्टर प्रभाव 1.0 विनिर्देशन प्रलेखन
उदाहरण यूआई फ़िल्टर का उपयोग करके बनाया गया।

मूल लेख: UNDERSTANDING CSS FILTER EFFECTS

पुनश्च
- क्रोम 19 में, ड्रॉप-शैडो फ़िल्टर छाया की सीमाओं को धुंधला नहीं करता है।
- चमक फिल्टर वास्तव में 1 (100%) से अधिक मूल्य नहीं समझता है। मूल लेख कहता है कि मूल्य 1 (100%) सामान्य चमक का मूल्य है, और इसमें वृद्धि के साथ, आप फ़िल्टर की ताकत बढ़ा सकते हैं। वास्तव में, 1 (100%) का मान सीमा में चमक को बढ़ाता है, और नकारात्मक -1 (-100%) चमक को कम करता है।
- सभी फिल्टर के साथ एक उदाहरण - लिंक ।
- राज्य पर CSS3 के संक्रमण के साथ फिल्टर का उपयोग करने का एक उदाहरण: होवर - लिंक ।
- धब्बा () फ़िल्टर का उपयोग करके एनिमेटेड मोज़ेक। अपने आप को देखें कि यह फ़िल्टर आपके प्रोसेसर को कैसे खाता है (हार्डवेयर त्वरण अक्षम होना चाहिए) - लिंक ।