फ़िल्टर - सीएसएस-ट्रिक्स

CSS फिल्टर एक शक्तिशाली उपकरण है जिसका उपयोग लेखक अलग-अलग दृश्य प्रभाव (ब्राउज़र के लिए फ़ोटोशॉप फिल्टर की तरह) प्राप्त करने के लिए कर सकते हैं। CSS filterगुण तत्व प्रदर्शित होने से पहले एक तत्व के प्रतिपादन पर धब्बा या रंग बदलने जैसे प्रभावों तक पहुंच प्रदान करता है। फिल्टर का उपयोग आमतौर पर एक छवि, पृष्ठभूमि, या सीमा के प्रतिपादन को समायोजित करने के लिए किया जाता है।

वाक्य रचना है:

.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )

मूल्य के लिए उपयोग करने के लिए कई कार्य हैं:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url() - एसवीजी फिल्टर लगाने के लिए
• custom() - "जल्द आ रहा है"

कई कार्यों का उपयोग किया जा सकता है, अंतरिक्ष अलग हो गया।

.do-more-things ( filter: blur(20px) grayscale(20%); )

फ़िल्टर फ़ंक्शंस

CSS फ़िल्टर प्रॉपर्टी का उपयोग करने के लिए, आप ऊपर सूचीबद्ध निम्न कार्यों में से एक के लिए एक मूल्य निर्दिष्ट करते हैं। यदि मान अमान्य है, तो फ़ंक्शन "कोई नहीं" देता है। जहां नोट किया गया है, को छोड़कर, एक प्रतिशत चिह्न के साथ व्यक्त किए गए मान (34% के रूप में) भी दशमलव के रूप में व्यक्त मूल्य (0.34 के रूप में) को स्वीकार करते हैं।

यहाँ एक डेमो है जो आपको व्यक्तिगत फ़िल्टरों के साथ खेलने की सुविधा देता है:

ग्रेस्केल ()

filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);

इनपुट छवि को ग्रेस्केल में परिवर्तित करता है। "राशि" का मूल्य रूपांतरण के अनुपात को परिभाषित करता है। 100% का मान पूरी तरह से ग्रेस्केल है। 0% का मान अपरिवर्तित इनपुट को छोड़ देता है। 0 से 100% के बीच मान प्रभाव पर रैखिक गुणक होते हैं। यदि "राशि" पैरामीटर गायब है, तो 100% मूल्य का उपयोग किया जाता है। नकारात्मक मूल्यों की अनुमति नहीं है।

सीपिया ()

filter: sepia(0.8); /* same as… */ filter: sepia(80%);

इनपुट छवि को सेपिया में परिवर्तित करता है। "राशि" का मूल्य रूपांतरण के अनुपात को परिभाषित करता है। 100% का मान पूरी तरह से सीपिया है। 0 का मान अपरिवर्तित इनपुट को छोड़ देता है। 0 से 100% के बीच मान प्रभाव पर रैखिक गुणक होते हैं। यदि "राशि" पैरामीटर गायब है, तो 100% मूल्य का उपयोग किया जाता है। नकारात्मक मूल्यों की अनुमति नहीं है।

संतृप्त ()

filter: saturate(2); /* same as… */ filter: sature(200%);

इनपुट छवि को संतृप्त करता है। "राशि" का मूल्य रूपांतरण के अनुपात को परिभाषित करता है। 0% का मान पूरी तरह से अन-संतृप्त है। 100% का मान अपरिवर्तित इनपुट को छोड़ देता है। अन्य मूल्य प्रभाव पर रैखिक गुणक हैं। 100% से अधिक मूल्यों की अनुमति है, सुपर संतृप्त परिणाम प्रदान करते हैं। यदि "राशि" पैरामीटर गायब है, तो 100% मूल्य का उपयोग किया जाता है। नकारात्मक मूल्यों की अनुमति नहीं है।

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

filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);

इनपुट छवि पर एक ह्यू रोटेशन लागू करता है। "कोण" का मान रंग सर्कल के चारों ओर डिग्री की संख्या को परिभाषित करता है इनपुट नमूने समायोजित किए जाएंगे। 0deg का मान अपरिवर्तित इनपुट को छोड़ देता है। यदि "कोण" पैरामीटर गायब है, तो एक मान का 0degउपयोग किया जाता है। अधिकतम मूल्य है 360deg।

पलटना ()

filter: invert(100%);

इनपुट छवि में नमूनों को सम्मिलित करता है। "राशि" का मूल्य रूपांतरण के अनुपात को परिभाषित करता है। 100% का मान पूरी तरह से उलटा है। 0% का मान अपरिवर्तित इनपुट को छोड़ देता है। 0 से 100% के बीच मान प्रभाव पर रैखिक गुणक होते हैं। यदि "राशि" पैरामीटर गायब है, तो 100% मूल्य का उपयोग किया जाता है। नकारात्मक मूल्यों की अनुमति नहीं है।

अपारदर्शिता ()

filter: opacity(0.5); /* same as… */ filter: opacity(50%);

इनपुट छवि में नमूनों पर पारदर्शिता लागू करता है। "राशि" का मूल्य रूपांतरण के अनुपात को परिभाषित करता है। 0% का मान पूरी तरह से पारदर्शी है। 100% का मान अपरिवर्तित इनपुट को छोड़ देता है। 0 से 100% के बीच मान प्रभाव पर रैखिक गुणक होते हैं। यह राशि द्वारा इनपुट छवि नमूनों को गुणा करने के बराबर है। यदि "राशि" पैरामीटर गायब है, तो 100% मूल्य का उपयोग किया जाता है। यह फ़ंक्शन अधिक स्थापित अपारदर्शिता संपत्ति के समान है; अंतर यह है कि फ़िल्टर के साथ, कुछ ब्राउज़र बेहतर प्रदर्शन के लिए हार्डवेयर त्वरण प्रदान करते हैं। नकारात्मक मूल्यों की अनुमति नहीं है।

चमक ()

filter: brightness(0.5); /* same as… */ filter: brightness(50%);

एक रेखीय गुणक को इनपुट छवि पर लागू करता है, जिससे यह अधिक या कम उज्ज्वल दिखाई देता है। 0% का मान एक ऐसी छवि बनाएगा जो पूरी तरह से काली हो। 100% का मान अपरिवर्तित इनपुट को छोड़ देता है। अन्य मूल्य प्रभाव पर रैखिक गुणक हैं। 100% से अधिक की राशि के मूल्यों की अनुमति है, जिससे उज्जवल परिणाम प्राप्त होते हैं। यदि "राशि" पैरामीटर गायब है, तो 100% मूल्य का उपयोग किया जाता है।

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

filter: contrast(4); /* same as… */ filter: contrast(400%);

इनपुट के विपरीत को समायोजित करता है। 0% का मान एक ऐसी छवि बनाएगा जो पूरी तरह से काली हो। 100% का मान अपरिवर्तित इनपुट को छोड़ देता है। 100% से अधिक की राशि के मूल्यों की अनुमति है, कम विपरीत परिणाम प्रदान करते हैं। यदि "राशि" पैरामीटर गायब है, तो 100% मूल्य का उपयोग किया जाता है।

धब्बा ()

filter: blur(5px); filter: blur(1rem);

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

परछाई डालना()

filter: drop-shadow((2,3) ?)

इनपुट छवि पर एक ड्रॉप शैडो इफ़ेक्ट लागू करता है। एक ड्रॉप शैडो प्रभावी रूप से एक धुंधला है, जो इमेज के नीचे कंपोज की गई एक विशेष रंग में खींची गई इनपुट इमेज के अल्फा मास्क का ऑफसेट संस्करण है। फ़ंक्शन इस प्रकार के पैरामीटर को स्वीकार करता है (CSS3 पृष्ठभूमि में परिभाषित), इस अपवाद के साथ कि 'इनसेट' कीवर्ड की अनुमति नहीं है।

यह फ़ंक्शन अधिक स्थापित बॉक्स-छाया संपत्ति के समान है; अंतर यह है कि फ़िल्टर के साथ, कुछ ब्राउज़र बेहतर प्रदर्शन के लिए हार्डवेयर त्वरण प्रदान करते हैं।

ड्रॉप-शैडो भी स्वाभाविक रूप से box-shadowउस वस्तु की नकल करता है जो इसके विपरीत स्वाभाविक रूप से केवल बॉक्स को अपना पथ मानता है।

जैसे टेक्स्ट-शैडो के साथ, ऑब्जेक्ट की तुलना में एक ठोस छाया बनाने के लिए कोई 'स्प्रेड' पैरामीटर नहीं है।

url ()

filter: url()

url()समारोह एक XML फ़ाइल है कि एक एसवीजी फिल्टर को निर्दिष्ट के स्थान लेता है, और एक विशिष्ट फिल्टर तत्व को एक लंगर शामिल हो सकते हैं। यहाँ एक ट्यूटोरियल है जो एसवीजी फ़िल्टर के लिए एक अच्छे इंट्रो के रूप में काम करता है जो एक मज़ेदार डेमो है।

एनिमेटेड फिल्टर

चूंकि फिल्टर्स एनिमेटेबल हैं, इसलिए यह पूरे मौज-मस्ती के लिए दरवाजे खोल सकता है।

टिप्पणियाँ

आप रेंडरिंग में हेरफेर करने के लिए किसी भी संख्या में कार्यों को जोड़ सकते हैं, लेकिन ऑर्डर अभी भी मायने रखता है (यानी, इसके grayscale()बाद का उपयोग sepia()पूरी तरह से ग्रे आउटपुट में होगा)।

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

विनिर्देश filter(image-URL, filter-functions)एक छवि के लिए एक आवरण समारोह भी पेश करता है । यह आपको उस समय किसी भी छवि को फ़िल्टर करने की अनुमति देगा जब आप इसे सीएसएस के भीतर उपयोग करते हैं। उदाहरण के लिए, आप पाठ को धुंधला किए बिना एक पृष्ठभूमि छवि को धुंधला कर सकते हैं। यह फ़िल्टर फ़ंक्शन अभी तक ब्राउज़रों में समर्थित नहीं है। इस बीच, आप एक समान प्रभाव बनाने के लिए एक छद्म तत्व की पृष्ठभूमि और फ़िल्टर दोनों को लागू कर सकते हैं।

IE मालिकाना फिल्टर सामान

filterसंपत्ति का भी इस्तेमाल किया , जैसे:

.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )

जब आप IE 8 और नीचे का समर्थन करने की जरूरत है ज्यादातर अस्पष्टता के लिए इस्तेमाल किया।

अधिक जानकारी

• W3C फ़िल्टर प्रभाव विशिष्टता
• http://html5-demos.appspot.com/static/css/filters/index.html
• बेनेट फीली की फिल्टर गैलरी
• एमडीएन डॉक्स
• क्या में उपयोग कर सकता हूँ
• http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
• https://github.com/Schepp/CSS-Filters-Polyfill
• CSS फ़िल्टर प्रभाव को समझना

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
18 *	३५	नहीं न	। ९	6 *

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	4.4 *	6.0-6.1 *