सीएसएस की मास्क-इमेज प्रॉपर्टी वाली इमेज पर इफ़ेक्ट लागू करें

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

Rachel Andrew

clip-path प्रॉपर्टी का इस्तेमाल करके, किसी एलिमेंट को क्लिप करने पर, क्लिप किया गया हिस्सा न दिखने लगता है. अगर आपको इमेज के किसी हिस्से को धुंधला करना है या उस पर कोई दूसरा इफ़ेक्ट लागू करना है, तो आपको मास्किंग का इस्तेमाल करना होगा. इस पोस्ट में, सीएसएस में mask-image प्रॉपर्टी का इस्तेमाल करने का तरीका बताया गया है. इससे, मास्क लेयर के तौर पर इस्तेमाल करने के लिए इमेज चुनी जा सकती है. इसके बाद, आपके पास तीन विकल्प होते हैं. किसी इमेज फ़ाइल को मास्क, SVG या ग्रेडिएंट के तौर पर इस्तेमाल किया जा सकता है.

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

ज़्यादातर ब्राउज़र में, स्टैंडर्ड सीएसएस मास्किंग प्रॉपर्टी का इस्तेमाल सिर्फ़ कुछ हद तक किया जा सकता है. ब्राउज़र के साथ बेहतर तरीके से काम करने के लिए, आपको स्टैंडर्ड प्रॉपर्टी के साथ-साथ -webkit- प्रीफ़िक्स का इस्तेमाल करना होगा. ब्राउज़र के साथ काम करने की पूरी जानकारी के लिए, क्या सीएसएस मास्क का इस्तेमाल किया जा सकता है? लेख पढ़ें.

प्रीफ़िक्स वाली प्रॉपर्टी का इस्तेमाल करने पर, ब्राउज़र की परफ़ॉर्मेंस अच्छी होती है. हालांकि, इमेज के ऊपर टेक्स्ट दिखाने के लिए मास्किंग का इस्तेमाल करते समय, इस बात का ध्यान रखें कि मास्किंग उपलब्ध न होने पर क्या होगा. mask-image या -webkit-mask-image के साथ काम करने की सुविधा का पता लगाने और मास्क किया गया वर्शन जोड़ने से पहले, पढ़ने लायक फ़ॉलबैक देने के लिए, सुविधा क्वेरी का इस्तेमाल करना फ़ायदेमंद हो सकता है.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

इमेज की मदद से मास्क करना

mask-image प्रॉपर्टी, background-image प्रॉपर्टी की तरह ही काम करती है. इमेज पास करने के लिए, url() वैल्यू का इस्तेमाल करें. मास्क की इमेज में पारदर्शी या आधा पारदर्शी हिस्सा होना चाहिए.

पूरी तरह से पारदर्शी एरिया की वजह से, उस एरिया के नीचे मौजूद इमेज का हिस्सा नहीं दिखेगा. हालांकि, सेमी-ट्रांसफ़ैरेंट एरिया का इस्तेमाल करने पर, ओरिजनल इमेज का कुछ हिस्सा दिखेगा. यहां गड़बड़ी के बीच का अंतर देखा जा सकता है. पहली इमेज, बिना मास्क वाले गुब्बारों की ओरिजनल इमेज है. दूसरी इमेज पर एक मास्क लगाया गया है. इसमें पूरी तरह से पारदर्शी बैकग्राउंड पर एक सफ़ेद तारा है. तीसरी इमेज में, ग्रेडिएंट ट्रांसपेरेंसी वाले बैकग्राउंड पर सफ़ेद रंग का एक स्टार है.

इस उदाहरण में, cover वैल्यू के साथ mask-size प्रॉपर्टी का भी इस्तेमाल किया जा रहा है. यह प्रॉपर्टी, background-size की तरह ही काम करती है. cover और contain कीवर्ड का इस्तेमाल किया जा सकता है. इसके अलावा, लंबाई की किसी भी मान्य इकाई या प्रतिशत का इस्तेमाल करके, बैकग्राउंड का साइज़ दिया जा सकता है.

बैकग्राउंड इमेज की तरह ही, मास्क को भी दोहराया जा सकता है. ऐसा करके, किसी छोटी इमेज को दोहराए जाने वाले पैटर्न के तौर पर इस्तेमाल किया जा सकता है.

SVG का इस्तेमाल करके मास्क करना

मास्क के तौर पर इमेज फ़ाइल का इस्तेमाल करने के बजाय, एसवीजी का इस्तेमाल किया जा सकता है. ऐसा करने के कुछ तरीके हैं. पहला तरीका, SVG में <mask> एलिमेंट होना और mask-image प्रॉपर्टी में उस एलिमेंट के आईडी का रेफ़रंस देना.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

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

हालांकि, यह कोई समस्या नहीं है. इमेज को मास्क करने के सबसे सामान्य मामले में, हम इमेज को SVG में शामिल कर सकते हैं.

ग्रेडिएंट की मदद से मास्क करना

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

मास्क के तौर पर इस्तेमाल किए गए एक साधारण लीनियर ग्रेडिएंट से यह पक्का किया जा सकता है कि किसी कैप्शन के नीचे, इमेज का निचला हिस्सा बहुत गहरे रंग का न हो.

आपके पास ग्रेडिएंट के किसी भी टाइप का इस्तेमाल करने का विकल्प होता है. साथ ही, अपनी पसंद के मुताबिक क्रिएटिविटी दिखाने का भी विकल्प होता है. इस अगले उदाहरण में, कैप्शन के पीछे रोशनी देने के लिए, सर्कुलर मास्क बनाने के लिए रेडियल ग्रेडिएंट का इस्तेमाल किया गया है.

एक से ज़्यादा मास्क का इस्तेमाल करना

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

उदाहरण के लिए, मुझे इस लेख में एक अच्छा चेकरबोर्ड पैटर्न मिला. बैकग्राउंड इमेज का इस्तेमाल करने वाला कोड ऐसा दिखता है:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

बैकग्राउंड इमेज के लिए डिज़ाइन किए गए इस या किसी अन्य पैटर्न को मास्क में बदलने के लिए, आपको background-* प्रॉपर्टी को काम की mask प्रॉपर्टी से बदलना होगा. इनमें, प्रीफ़िक्स -webkit वाली प्रॉपर्टी भी शामिल हैं.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

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

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

Unsplash पर Julio Rionaldo की ओर से अपलोड की गई फ़ोटो.