सीएसएस मास्किंग की मदद से, किसी इमेज को मास्क लेयर के तौर पर इस्तेमाल किया जा सकता है. इसका मतलब है कि इमेज एडिटर के बिना दिलचस्प इफ़ेक्ट बनाने के लिए, मास्क के तौर पर किसी इमेज, SVG या ग्रेडिएंट का इस्तेमाल किया जा सकता है.
clip-path प्रॉपर्टी का इस्तेमाल करके, किसी एलिमेंट को क्लिप करने पर, क्लिप किया गया एरिया न दिखता.
अगर आपको इमेज के किसी हिस्से को धुंधला करना है या उस पर कोई दूसरा इफ़ेक्ट लागू करना है, तो आपको मास्किंग का इस्तेमाल करना होगा.
इस पोस्ट में, सीएसएस में mask-image प्रॉपर्टी का इस्तेमाल करने का तरीका बताया गया है. इससे, मास्क लेयर के तौर पर इस्तेमाल करने के लिए इमेज चुनी जा सकती है.
इसके बाद, आपके पास तीन विकल्प होते हैं. किसी इमेज फ़ाइल को मास्क, SVG या ग्रेडिएंट के तौर पर इस्तेमाल किया जा सकता है.
ब्राउज़र के साथ काम करना
सीएसएस मास्किंग, बेसलाइन के तौर पर हाल ही में उपलब्ध हुई है. हालांकि, mask-image की ज़्यादातर सुविधाएं, ब्राउज़र के पुराने वर्शन में उपलब्ध हैं. इसके लिए, प्रीफ़िक्स के तौर पर -webkit-mask-image का इस्तेमाल किया जाता है.
यहां दिए गए उदाहरणों में, ब्राउज़र के साथ बेहतर तरीके से काम करने के लिए, दोनों प्रॉपर्टी को एक साथ इस्तेमाल करने का तरीका बताया गया है.
इमेज की मदद से मास्क करना
mask-image प्रॉपर्टी, background-image प्रॉपर्टी की तरह ही काम करती है.
इमेज को पास करने के लिए, url() वैल्यू का इस्तेमाल करें.
मास्क की इमेज में पारदर्शी या आधा पारदर्शी हिस्सा होना चाहिए.
पूरी तरह से पारदर्शी एरिया की वजह से, इमेज के उस हिस्से को नहीं देखा जा सकेगा. हालांकि, सेमी-ट्रांसफ़ैरेंट एरिया का इस्तेमाल करने पर, ओरिजनल इमेज का कुछ हिस्सा दिखेगा. इस CodePen में अंतर देखा जा सकता है.
- पहली इमेज, बिना मास्क वाले गुब्बारों की ओरिजनल इमेज है.
- दूसरी इमेज पर एक मास्क लगाया गया है. इसमें पूरी तरह से पारदर्शी बैकग्राउंड पर एक सफ़ेद तारा है.
- तीसरी इमेज में, ग्रेडिएंट ट्रांसपेरेंसी वाले बैकग्राउंड पर सफ़ेद रंग का एक स्टार है.
इस उदाहरण में भी mask-size प्रॉपर्टी का इस्तेमाल किया गया है, जिसकी वैल्यू cover है.
यह प्रॉपर्टी, background-size की तरह ही काम करती है.
cover और contain कीवर्ड का इस्तेमाल करें या लंबाई की किसी मान्य यूनिट या प्रतिशत का इस्तेमाल करके, बैकग्राउंड का साइज़ तय करें.
बैकग्राउंड इमेज की तरह ही, मास्क को भी दोहराया जा सकता है. ऐसा करके, किसी छोटी इमेज को दोहराए जाने वाले पैटर्न के तौर पर इस्तेमाल किया जा सकता है.
SVG के साथ मास्क
मास्क के तौर पर इमेज फ़ाइल का इस्तेमाल करने के बजाय, एसवीजी का इस्तेमाल किया जा सकता है.
ऐसा करने के कुछ तरीके हैं.
पहला तरीका, एसवीजी में <mask> एलिमेंट होना और mask-image प्रॉपर्टी में उस एलिमेंट के आईडी का रेफ़रंस देना.
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
इस तरीके का फ़ायदा यह है कि मास्क को सिर्फ़ इमेज पर ही नहीं, बल्कि किसी भी एचटीएमएल एलिमेंट पर लागू किया जा सकता है.
किसी इमेज को मास्क करने के सबसे सामान्य मामले में, इमेज को SVG में शामिल किया जा सकता है.
पहला तरीका, बेसलाइन है. यह हाल ही में उपलब्ध हुआ है. इसमें SVG में मौजूद इमेज, उन पुराने ब्राउज़र पर काम करती है जो -webkit प्रीफ़िक्स वाले वर्शन के साथ काम करते हैं.
ग्रेडिएंट वाला मास्क
मास्क के तौर पर सीएसएस ग्रेडिएंट का इस्तेमाल करना, मास्क किए गए हिस्से को पाने का एक बेहतरीन तरीका है. इसके लिए, आपको इमेज या एसवीजी बनाने की ज़रूरत नहीं पड़ती.
मास्क के तौर पर इस्तेमाल किए गए लीनियर ग्रेडिएंट से यह पक्का किया जा सकता है कि किसी कैप्शन के नीचे, इमेज का निचला हिस्सा बहुत गहरे रंग का न हो.
आपके पास ग्रेडिएंट के किसी भी टाइप का इस्तेमाल करने का विकल्प होता है. साथ ही, अपनी पसंद के मुताबिक क्रिएटिविटी दिखाने का भी विकल्प होता है. इस अगले उदाहरण में, कैप्शन के पीछे रोशनी देने के लिए, सर्कुलर मास्क बनाने के लिए रेडियल ग्रेडिएंट का इस्तेमाल किया गया है.
एक से ज़्यादा मास्क
बैकग्राउंड इमेज की तरह, मास्क के लिए भी कई सोर्स तय किए जा सकते हैं. साथ ही, अपनी पसंद का इफ़ेक्ट पाने के लिए, इन्हें आपस में जोड़ा जा सकता है. यह सुविधा तब खास तौर पर काम आती है, जब आपको सीएसएस ग्रेडिएंट से जनरेट किए गए पैटर्न को मास्क के तौर पर इस्तेमाल करना हो. आम तौर पर, इनमें कई बैकग्राउंड इमेज का इस्तेमाल किया जाता है. इसलिए, इन्हें आसानी से मास्क में बदला जा सकता है.
उदाहरण के लिए, इस सीएसएस ग्रेडिएंट वाले पैटर्न में चेकरबोर्ड पैटर्न है. बैकग्राउंड इमेज का इस्तेमाल करने वाला कोड ऐसा दिखता है:
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;
इमेज पर ग्रेडिएंट पैटर्न लागू करके, कुछ बेहतरीन इफ़ेक्ट बनाए जा सकते हैं. नीचे दिए गए CodePen को फ़ॉर्क करके, कुछ अन्य वैरिएशन आज़माएं.
क्लिपिंग के साथ-साथ, सीएसएस मास्क का इस्तेमाल करके भी इमेज और अन्य एचटीएमएल एलिमेंट को ज़्यादा दिलचस्प बनाया जा सकता है. इसके लिए, आपको किसी ग्राफ़िक्स ऐप्लिकेशन का इस्तेमाल करने की ज़रूरत नहीं है.