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

सीएसएस मास्किंग की मदद से, किसी इमेज को मास्क लेयर के तौर पर इस्तेमाल किया जा सकता है. इसका मतलब है कि बिना इमेज एडिटर के दिलचस्प इफ़ेक्ट बनाने के लिए, मास्क के तौर पर किसी इमेज, 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 को रीमिक्स करके देखें और कुछ अन्य वैरिएशन आज़माएं.

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

Unस्प्लैश पर जूलियो रियोनाल्डो की फ़ोटो.