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