CSS Academy · पाठ

CSS Mask बनाम Clip-path

mask-image वाले CSS masking की तुलना clip-path से कीजिए और सही tool चुनना सीखिए।

पाठ 4, कुल 4 में से12 चरण

CSS Mask बनाम Clip-path, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

किसी तत्व के भागों को छिपाने के दो तरीके

CSS किसी तत्व के भागों को अदृश्य बनाने के लिए दो तंत्र प्रदान करता है: clip-path और mask-image। इनकी क्षमताएँ, प्रदर्शन संबंधी विशेषताएँ और उपयोग के मामले अलग-अलग हैं।

clip-path का पुनरावलोकन

clip-path कठोर किनारों वाला दृश्यमान क्षेत्र निर्धारित करने के लिए CSS आकृति फ़ंक्शन या SVG का उपयोग करता है। क्लिप के बाहर की हर चीज़ पूरी तरह अदृश्य होती है। मुलायम किनारे संभव नहीं हैं।

<div class="card"></div>

mask-image

mask-image मास्क के रूप में किसी चित्र या ग्रेडिएंट का उपयोग करता है। जहाँ मास्क काला या पारदर्शी होता है, वहाँ तत्व छिपा रहता है। जहाँ वह सफ़ेद या अपारदर्शी होता है, वहाँ तत्व दिखाई देता है। मुलायम ग्रेडिएंट से धीरे-धीरे फीके पड़ने वाले किनारे बनाए जा सकते हैं।

<div class="fade-bottom"></div>

mask-image से मुलायम किनारे

मास्क का मुख्य लाभ यह है कि ग्रेडिएंट मास्क ऐसे चिकने, धीरे-धीरे फीके पड़ने वाले किनारे बनाते हैं, जिन्हें clip-path नहीं बना सकता:

<div class="carousel-edges"></div>

चित्र फ़ाइल के साथ mask-image

मास्क के रूप में PNG या SVG चित्र का उपयोग करें। चित्र की चमक या अल्फ़ा चैनल पारदर्शिता निर्धारित करता है:

<div class="element"></div>

मास्क के संक्षिप्त गुण

mask एक संक्षिप्त गुण है, जो mask-image, mask-repeat, mask-size, mask-position आदि को मिलाता है — यह background के संक्षिप्त गुण के समान है।

<div class="element"></div>

Safari के लिए -webkit-mask

पूर्ण मास्क समर्थन के लिए Safari में -webkit-mask उपसर्ग आवश्यक है। इसे हमेशा मानक गुण के साथ शामिल करें:

<div class="element"></div>

mask-composite

एकाधिक मास्क परतों का उपयोग करते समय, mask-composite यह नियंत्रित करता है कि उन्हें किस प्रकार मिलाया जाए:

<div class="complex-mask"></div>

प्रदर्शन तुलना

clip-path और mask-image दोनों केवल कंपोज़िट रेंडरिंग के बजाय पेंट को सक्रिय करते हैं। बड़े तत्वों के लिए प्रदर्शन का सावधानीपूर्वक परीक्षण करें। सरल clip-path आकृतियाँ सामान्यतः चित्र-आधारित मास्क से तेज़ होती हैं।

clip-path और mask के बीच चुनाव

इन स्थितियों में clip-path का उपयोग करें:

आपको कठोर ज्यामितीय किनारे चाहिए
आप आकृति को ऐनिमेट करना चाहते हैं
मुलायम किनारों से अधिक सरलता महत्वपूर्ण है

इन स्थितियों में mask-image का उपयोग करें:

आपको मुलायम या धीरे-धीरे फीके पड़ने वाले किनारे चाहिए
आपको जटिल चित्र-आधारित आकृतियाँ चाहिए
आप ग्रेडिएंट फ़ेड चाहते हैं

त्वरित जाँच

clip-path के विपरीत, कौन-सा CSS गुण दृश्यमान क्षेत्र के किनारों को धीरे-धीरे फीका और मुलायम बनाता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

clip-path कठोर किनारों वाली ज्यामितीय क्लिप बनाता है। mask-image दृश्यमान क्षेत्र बनाने के लिए चित्रों या ग्रेडिएंट का उपयोग करता है, जिससे मुलायम, धीरे-धीरे फीके पड़ने वाले किनारे संभव होते हैं। ग्रेडिएंट फ़ेड और जटिल आकृतियों के लिए mask-image का उपयोग करें; तीखी ज्यामितीय आकृतियों और ऐनिमेट की गई आकृतियों के लिए clip-path का उपयोग करें। Safari समर्थन के लिए हमेशा -webkit-mask उपसर्ग शामिल करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “CSS Mask बनाम Clip-path” पाठ निःशुल्क है?

हाँ—“CSS Mask बनाम Clip-path” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“CSS Mask बनाम Clip-path” में मैं क्या सीखूँगा?

mask-image वाले CSS masking की तुलना clip-path से कीजिए और सही tool चुनना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“CSS Mask बनाम Clip-path” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ