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