फ़िल्टर

द सीएसएस पॉडकास्ट - 023: फ़िल्टर

मान लें कि आपको एक ऐसा एलिमेंट बनाना है जो थोड़ा पारदर्शी हो, इमेज में सबसे ऊपर, फ़्रॉस्टेड ग्लास इफ़ेक्ट दिया गया है. यह ज़रूरी है कि टेक्स्ट, लाइव टेक्स्ट हो, न कि कोई इमेज. आपको ऐसा कैसे करना है?

सीएसएस फ़िल्टर और backdrop-filter का कॉम्बिनेशन इससे हम इफ़ेक्ट लागू कर पाते हैं और रीयल टाइम में अपने वीडियो को ब्लर कर पाते हैं. धुंधला करने वाला और अपारदर्शिता कई उपलब्ध फ़िल्टर में से दो हैं. तो आइए देखते हैं कि ये सभी काम क्या करते हैं और इनका इस्तेमाल कैसे करना है.

filter प्रॉपर्टी

ब्राउज़र सहायता

  • Chrome: 53. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 9.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

आप इन चीज़ों के लिए, इनमें से एक या कई फ़िल्टर लागू कर सकते हैं filter. अगर कोई फ़िल्टर गलत तरीके से लागू किया जाता है, तो filter के लिए तय किए गए बाकी फ़िल्टर काम नहीं करेंगे.

blur

इससे गौशियन ब्लर इफ़ेक्ट लागू होता है और आपके पास radius, जो है धुंधला करने की अवधि कितनी है. यह एक लंबाई की इकाई होनी चाहिए, जैसे 10px. प्रतिशत स्वीकार नहीं किए जाते हैं.

.my-element {
    filter: blur(0.2em);
}

brightness

ब्राउज़र सहायता

  • Chrome: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

किसी एलिमेंट की चमक बढ़ाने या कम करने के लिए, चमक फ़ंक्शन का इस्तेमाल करें. चमक की वैल्यू को प्रतिशत के तौर पर दिखाया जाता है. साथ ही, बदली गई इमेज को 100% के तौर पर दिखाया जाता है. वैल्यू 0% होने पर, इमेज पूरी तरह से काली हो जाती है, इसलिए, 0% से 100% के बीच की वैल्यू से इमेज की चमक कम होती है. चमक बढ़ाने के लिए, 100% से ज़्यादा वैल्यू इस्तेमाल करें.

.my-element {
    filter: brightness(80%);
}

contrast

ब्राउज़र सहायता

  • Chrome: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

कंट्रास्ट को कम करने या बढ़ाने के लिए, वैल्यू को 0% और 100% के बीच सेट करें.

.my-element {
    filter: contrast(160%);
}

grayscale

ब्राउज़र सहायता

  • Chrome: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

grayscale() के लिए वैल्यू के तौर पर 1 का इस्तेमाल करके, पूरी तरह ग्रेस्केल इफ़ेक्ट लागू किया जा सकता है, या 0 पूरी तरह से सैचुरेटेड एलिमेंट के लिए. सिर्फ़ पार्शियल ग्रेस्केल इफ़ेक्ट लागू करने के लिए, प्रतिशत या दशमलव वाली वैल्यू का भी इस्तेमाल किया जा सकता है. अगर कोई आर्ग्युमेंट पास नहीं किया जाता है, तो एलिमेंट पूरी तरह से ग्रेस्केल हो जाएगा. अगर आपने 100% से ज़्यादा वैल्यू पास की है, तो वह 100% पर सीमित हो जाएगी.

.my-element {
    filter: grayscale(80%);
}

invert

ब्राउज़र सहायता

  • Chrome: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

grayscale की तरह, invert() फ़ंक्शन को चालू या बंद करने के लिए, 1 या 0 को पास करें. यह सुविधा चालू होने पर, एलिमेंट के रंग पूरी तरह से उलट जाते हैं. रंगों का सिर्फ़ कुछ हिस्सा बदलने की सुविधा को लागू करने के लिए, प्रतिशत या दशमलव वाली वैल्यू का भी इस्तेमाल किया जा सकता है. अगर invert() फ़ंक्शन में कोई आर्ग्युमेंट पास नहीं किया जाता है, तो तो वह तत्व पूरी तरह से उलटा हो जाएगा.

.my-element {
    filter: invert(1);
}

opacity

ब्राउज़र सहायता

  • Chrome: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

opacity() फ़िल्टर, opacity प्रॉपर्टी की तरह ही काम करता है. इस टूल की मदद से, ओपैसिटी को बढ़ाने या कम करने के लिए कोई संख्या या प्रतिशत पास किया जा सकता है. अगर कोई आर्ग्युमेंट पास नहीं किया जाता है, तो एलिमेंट पूरी तरह से दिखता है.

.my-element {
    filter: opacity(0.3);
}

saturate

ब्राउज़र सहायता

  • Chrome: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

सैचुरेट फ़िल्टर, brightness फ़िल्टर से काफ़ी मिलता-जुलता है और इसी तर्क को स्वीकार करता है: संख्या या प्रतिशत. चमक के प्रभाव को बढ़ाने या घटाने के बजाय, saturate रंग की मात्रा को बढ़ाता या कम करता है.

.my-element {
    filter: saturate(155%);
}

sepia

ब्राउज़र सहायता

  • Chrome: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

इस फ़िल्टर का इस्तेमाल करके, सेपिया टोन इफ़ेक्ट का इस्तेमाल किया जा सकता है. यह फ़िल्टर, grayscale() की तरह काम करता है. सेपिया टोन एक फ़ोटोग्राफ़ी प्रिंटिंग तकनीक है. यह काले टोन को भूरे टोन में बदल देती है, ताकि वे गर्म हो जाएं. sepia() के लिए तर्क के तौर पर कोई संख्या या प्रतिशत पास किया जा सकता है जो प्रभाव को बढ़ाता या घटाता है. किसी आर्ग्युमेंट के पास न होने पर, पूरा सेपिया इफ़ेक्ट जुड़ जाता है (sepia(100%) के बराबर).

.my-element {
    filter: sepia(70%);
}

hue-rotate

ब्राउज़र सहायता

  • Chrome: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

आपने जाना कि hsl का रंग किस तरह से कलर व्हील के घूमने का रेफ़रंस देता है colors लेसन और यह फ़िल्टर इसी तरह से काम करता है. अगर आप कोई कोण पास करते हैं, जैसे डिग्री या मोड़, यह एलिमेंट के सभी रंगों के रंग में बदलाव कर देता है, जिसके हिसाब से कलर व्हील का हिस्सा बदला जा रहा है. अगर आपने कोई तर्क पास नहीं किया, तो कुछ नहीं होगा.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

ब्राउज़र सहायता

  • Chrome: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 35. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

किसी डिज़ाइन टूल की तरह ही कर्व हग ड्रॉप शैडो लागू किया जा सकता है, जैसे कि Photoshop: drop-shadow. इस शैडो को ऐल्फ़ा मास्क पर लागू किया जाता है जो कि कटआउट इमेज में शैडो जोड़ने के लिए इसे बहुत उपयोगी बनाता है. drop-shadow फ़िल्टर एक शैडो पैरामीटर लेता है, जिसमें स्पेस से अलग किए गए ऑफ़सेट-x, ऑफ़सेट-y, ब्लर, और कलर की वैल्यू शामिल होती हैं. यह करीब-करीब box-shadow के जैसा है, हालांकि, inset कीवर्ड और स्प्रेड वैल्यू का इस्तेमाल नहीं किया जा सकता.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

शैडो मॉड्यूल में अलग-अलग तरह की शैडो के बारे में ज़्यादा जानें.

url

ब्राउज़र सहायता

  • Chrome: 5. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 3. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 6. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

url फ़िल्टर की मदद से, लिंक किए गए SVG एलिमेंट या फ़ाइल से SVG फ़िल्टर लागू किया जा सकता है. आप SVG फ़िल्टर के बारे में यहां ज़्यादा जानें

बैकग्राउंड फ़िल्टर

ब्राउज़र सहायता

  • Chrome: 76. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 79. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 103. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 18. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

बैकड्रॉप-फ़िल्टर प्रॉपर्टी, filter के रूप में उन सभी फ़िल्टर फ़ंक्शन वैल्यू को स्वीकार करती है. backdrop-filter और filter के बीच का अंतर backdrop-filter प्रॉपर्टी, सिर्फ़ बैकग्राउंड पर फ़िल्टर लागू करती है. जहां filter प्रॉपर्टी इसे पूरे एलिमेंट पर लागू करती है.

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

देखें कि आपको कितना समझ आया है

फ़िल्टर के बारे में अपनी जानकारी परखें

इनमें से कौनसे सीएसएस फ़िल्टर फ़ंक्शन हैं?

grayscale()
🎉
invert()
🎉
flip()
फिर से कोशिश करें!
multiply()
फिर से कोशिश करें!
blur()
🎉
brightness()
🎉

क्या सीएसएस, SVG फ़िल्टर का इस्तेमाल कर सकती है?

हां
url() फ़िल्टर फ़ंक्शन से यह सुविधा चालू होती है
नहीं
फिर से कोशिश करें!