सीएसएस पॉडकास्ट - 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 की तरह ही,
इसे चालू या बंद करने के लिए, 1 या 0 को invert() फ़ंक्शन में पास करें.
इसके चालू होने पर, एलिमेंट के रंग पूरी तरह उलटे हो जाते हैं.
रंगों का सिर्फ़ कुछ हिस्सा बदलने की सुविधा को लागू करने के लिए, प्रतिशत या दशमलव वाली वैल्यू का भी इस्तेमाल किया जा सकता है.
अगर 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
किसी डिज़ाइन टूल, जैसे कि drop-shadow के साथ Photoshop में ड्रॉप शैडो को लागू किया जा सकता है.
इस शैडो को ऐल्फ़ा मास्क पर लागू किया जाता है जो कि कटआउट इमेज में शैडो जोड़ने के लिए इसे बहुत उपयोगी बनाता है.
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() फ़िल्टर फ़ंक्शन से यह सुविधा चालू होती है