फ़िल्टर

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

मान लें कि आपको एक ऐसा एलिमेंट बनाना है जिसमें थोड़ा धुंधला, फ़्रोस्ट किया गया ग्लास वाला असर हो, जो किसी इमेज के ऊपर दिखे. टेक्स्ट, इमेज के बजाय लाइव टेक्स्ट होना चाहिए. ऐसा कैसे किया जाता है?

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

filter प्रॉपर्टी

Browser Support

  • Chrome: 53.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 9.1.

Source

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

blur

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

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

brightness

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

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

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

contrast

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

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

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

grayscale

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

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

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

invert

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

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

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

opacity

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

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

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

saturate

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

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

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

sepia

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

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

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

hue-rotate

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

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

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

drop-shadow

Browser Support

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Source

किसी डिज़ाइन टूल की तरह ही, यहां भी कर्व-हगिंग ड्रॉप शैडो लागू किया जा सकता है. जैसे, drop-shadow की मदद से फ़ोटोशॉप में. यह शैडो, अल्फा मास्क पर लागू होती है. इससे, कटआउट इमेज में शैडो जोड़ने में काफ़ी मदद मिलती है. drop-shadow फ़िल्टर, शैडो पैरामीटर लेता है. इसमें स्पेस से अलग की गई offset-x, offset-y, blur, और color वैल्यू होती हैं. यह box-shadow से काफ़ी मिलता-जुलता है, लेकिन इसमें inset कीवर्ड और स्पैड वैल्यू का इस्तेमाल नहीं किया जा सकता.

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

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

url

Browser Support

  • Chrome: 5.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 6.

Source

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

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

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

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

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

देखें कि आपको क्या समझ आया

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

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

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

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

हां
url() फ़िल्टर फ़ंक्शन की मदद से ऐसा किया जा सकता है
नहीं
फिर से कोशिश करें!