सीएसएस पॉडकास्ट - 023: फ़िल्टर
मान लें कि आपको एक ऐसा एलिमेंट बनाना है जो इमेज के सबसे ऊपर मौजूद होता है. टेक्स्ट लाइव टेक्स्ट होना चाहिए, इमेज नहीं. इसे कैसे किया जा सकता है?
सीएसएस फ़िल्टर और backdrop-filter को मिलाकर, हम रीयल टाइम में इफ़ेक्ट लागू कर सकते हैं और ज़रूरी इफ़ेक्ट को धुंधला कर सकते हैं.
धुंधला और अपारदर्शिता कई तरह के फ़िल्टर में से दो हैं.
इसलिए, चलो देखते हैं कि वे सभी क्या करते हैं और उन्हें कैसे इस्तेमाल करना है.
filter प्रॉपर्टी
filter की वैल्यू के तौर पर, इनमें से एक या कई फ़िल्टर लागू किए जा सकते हैं.
अगर आपने कोई फ़िल्टर गलत तरीके से लागू किया है,
तो filter के लिए तय किए गए बाकी फ़िल्टर काम नहीं करेंगे.
blur
इसमें गाउज़ियन ब्लर इफ़ेक्ट लगाया जाता है. सिर्फ़ radius आर्ग्युमेंट का इस्तेमाल किया जा सकता है, जिसका मतलब है कि कितना धुंधला किया गया है.
यह एक लंबाई की इकाई होना चाहिए, जैसे कि 10px. प्रतिशत स्वीकार नहीं किए जाते.
.my-element {
filter: blur(0.2em);
}
brightness
किसी तत्व की चमक बढ़ाने या घटाने के लिए, चमक फ़ंक्शन का उपयोग करें. चमक की वैल्यू को प्रतिशत के रूप में दिखाया जाता है. इसमें बिना बदलाव वाली इमेज को 100% वैल्यू के तौर पर दिखाया जाता है. मान को 0% करने से इमेज पूरी तरह से काली हो जाती है, इसलिए 0% से 100% के बीच की वैल्यू इमेज में कम रोशनी डालती है. चमक बढ़ाने के लिए 100% से ज़्यादा वैल्यू का इस्तेमाल करें.
.my-element {
filter: brightness(80%);
}
contrast
कंट्रास्ट को कम या ज़्यादा करने के लिए, वैल्यू को 0% और 100% के बीच सेट करें.
.my-element {
filter: contrast(160%);
}
grayscale
grayscale() की वैल्यू के तौर पर 1 का इस्तेमाल करके, पूरी तरह से ग्रेस्केल इफ़ेक्ट लागू किया जा सकता है या पूरी तरह से सैचुरेटेड एलिमेंट के लिए 0 का इस्तेमाल किया जा सकता है.
सिर्फ़ आंशिक ग्रेस्केल इफ़ेक्ट लागू करने के लिए, प्रतिशत या दशमलव वैल्यू का भी इस्तेमाल किया जा सकता है.
अगर आपने कोई भी आर्ग्युमेंट पास नहीं किया, तो एलिमेंट पूरी तरह ग्रेस्केल हो जाएगा.
अगर वैल्यू 100% से ज़्यादा है, तो उसे 100% पर सीमित कर दिया जाएगा.
.my-element {
filter: grayscale(80%);
}
invert
grayscale की तरह ही,
invert() फ़ंक्शन को चालू या बंद करने के लिए, इसमें 1 या 0 पास किए जा सकते हैं.
यह चालू होने पर, एलिमेंट के रंग पूरी तरह उलट हो जाते हैं.
रंगों को कुछ हद तक बदलने की सुविधा को लागू करने के लिए, प्रतिशत या दशमलव वैल्यू का भी इस्तेमाल किया जा सकता है.
अगर invert() फ़ंक्शन में कोई आर्ग्युमेंट पास नहीं किया जाता है,
तो एलिमेंट पूरी तरह उलटा हो जाएगा.
.my-element {
filter: invert(1);
}
opacity
opacity() फ़िल्टर, opacity प्रॉपर्टी की तरह ही काम करता है. इसमें अपारदर्शिता को बढ़ाने या कम करने के लिए, कोई संख्या या प्रतिशत पास किया जा सकता है.
अगर कोई आर्ग्युमेंट पास नहीं किया जाता है, तो एलिमेंट पूरी तरह दिखता है.
.my-element {
filter: opacity(0.3);
}
saturate
संतृप्त फ़िल्टर, काफ़ी हद तक brightness फ़िल्टर की तरह होता है और इसी तर्क को स्वीकार करता है:
संख्या या प्रतिशत.
saturate की मदद से, स्क्रीन की रोशनी को बढ़ाने या घटाने के बजाय, उसके रंग को गहरा या फीका किया जाता है.
.my-element {
filter: saturate(155%);
}
sepia
grayscale() की तरह काम करने वाले फ़िल्टर का इस्तेमाल करके, सेपिया टोन वाला इफ़ेक्ट जोड़ा जा सकता है.
सेपिया टोन, फ़ोटोग्राफ़िक प्रिंटिंग की एक तकनीक है. यह काले टोन को गर्म करने के लिए, भूरे टोन में बदल देती है.
आप sepia() के लिए तर्क के रूप में कोई संख्या या प्रतिशत पास कर सकते हैं,
जो प्रभाव को बढ़ाता या घटाता है.
कोई तर्क नहीं देने पर सेपिया इफ़ेक्ट पूरी तरह जुड़ जाता है (sepia(100%) के बराबर).
.my-element {
filter: sepia(70%);
}
hue-rotate
आपने जाना कि hsl में रंग, कलर लेसन में कलर व्हील के रोटेशन का रेफ़रंस कैसे देता है और यह फ़िल्टर भी इसी तरह काम करता है.
अगर डिग्री या मोड़ जैसा कोई ऐंगल पास किया जाता है,
तो एलिमेंट के सभी कलर का कलर शिफ़्ट हो जाता है. साथ ही, उस कलर व्हील का हिस्सा भी बदल जाता है जिसका वह रेफ़रंस देता है. अगर आप कोई तर्क नहीं पास करते हैं, तो कुछ नहीं होता है.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
आप चाहें, तो कर्व-हगिंग ड्रॉप शैडो का इस्तेमाल करें. यह ठीक वैसा ही है जैसा किसी डिज़ाइन टूल, जैसे कि Photoshop में drop-shadow वाला होता है.
यह शैडो, ऐल्फ़ा मास्क पर लागू किया जाता है. इससे कटआउट इमेज में शैडो जोड़ने में मदद मिलती है.
drop-shadow फ़िल्टर एक शैडो पैरामीटर लेता है, जिसमें स्पेस से अलग किए गए ऑफ़सेट-x, ऑफ़सेट-y, ब्लर, और कलर की वैल्यू होती हैं.
यह करीब-करीब box-shadow के जैसा है,
लेकिन inset कीवर्ड और स्प्रेड वैल्यू का इस्तेमाल नहीं किया जा सकता.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
शैडो मॉड्यूल में अलग-अलग तरह की शैडो के बारे में ज़्यादा जानें.
url
url फ़िल्टर की मदद से, लिंक किए गए SVG एलिमेंट या फ़ाइल से SVG फ़िल्टर लागू किया जा सकता है.
SVG फ़िल्टर के बारे में यहां ज़्यादा जानें
बैकग्राउंड फ़िल्टर
बैकड्रॉप-फ़िल्टर प्रॉपर्टी, filter जैसी सभी फ़िल्टर फ़ंक्शन वैल्यू को स्वीकार करती है.
backdrop-filter और filter के बीच
यह अंतर है कि backdrop-filter प्रॉपर्टी सिर्फ़ बैकग्राउंड पर फ़िल्टर लागू करती है,
जहां filter प्रॉपर्टी उसे पूरे एलिमेंट पर लागू करती है.
इस लेसन की शुरुआत में दिया गया उदाहरण बिलकुल सही है, क्योंकि आप टेक्स्ट को धुंधला नहीं करना चाहते. साथ ही, अतिरिक्त एचटीएमएल एलिमेंट भी नहीं जोड़ना चाहते. केवल पृष्ठभूमि पर फ़िल्टर लागू कर पाने से वह सक्षम होता है.
जांचें कि आपको कितना समझ आया
फ़िल्टर के बारे में अपनी जानकारी की जांच करें
इनमें से कौनसे सीएसएस फ़िल्टर फ़ंक्शन होते हैं?
grayscale()invert()flip()multiply()blur()brightness()क्या सीएसएस SVG फ़िल्टर का इस्तेमाल कर सकती है?
url() फ़िल्टर फ़ंक्शन इसे चालू करता है