CSS शेडडिंग

CSS छाया का इस्तेमाल करके, आप एक छाया स्तर बना सकते हैं और इसे एलीमेंट पर लगा सकते हैं, ताकि एलीमेंट के कुछ हिस्से को आंशिक या पूर्ण रूप से छुपा सकते हैं。

mask-image गुण

CSS उदाहरण व्याख्या इस गुण को छाया स्तर इमेज निर्दिष्ट करता है।

छाया स्तर इमेज PNG इमेज, SVG इमेज,CSS ग्रेडिएंट या SVG <mask> एलीमेंट。

ब्राउज़र समर्थन

नीचे दिए गए संख्या पहली ब्राउज़र संस्करण को पूरी तरह से समर्थित करता है।

साथ -webkit- पूर्वी अक्षरों के संख्या पहली संस्करण को समर्थित करता है。

इमेज को छाया स्तर के रूप में इस्तेमाल करें

PNG या SVG इमेज को छाया स्तर के रूप में इस्तेमाल करने के लिए url() छाया स्तर इमेज को मानकीकृत करें।

छाया इमेज को पारदर्शी या अर्ध-पारदर्शी क्षेत्र होना चाहिए। काला रंग पूर्ण पारदर्शी को दर्शाता है。

यह हम इस्तेमाल करेंगे की छाया इमेज (PNG इमेज) है:

यह इटली के पांच प्यूर्वाकार गांव की इमेज है:

अब, हम छाया इमेज (ऊपरी PNG इमेज) को इटली के पांच प्यूर्वाकार गांव इमेज के छाया स्तर के रूप में लागू करेंगे:

उदाहरण

नीचे स्रोत कोड है:

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

स्वयं का प्रयोग करें

उदाहरण व्याख्या

उदाहरण व्याख्या mask-image

mask-repeat अभियात्मकता का वाला इस्तेमाल करते हैं

एक और उदाहरण

अगर हम छोड़ दें mask-repeat अभियात्मकता, मास्क इमेज पूरे वूअंगस्यून इमेज पर दोहराया जाएगा:

उदाहरण

नीचे स्रोत कोड है:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

स्वयं का प्रयोग करें

ग्रेडिएंट के रूप में मास्क लेयर का इस्तेमाल करते हैं

CSS लाइनियर और आयामिक ग्रेडिएंट भी मास्क इमेज के रूप में इस्तेमाल किए जा सकते हैं。

लाइनियर ग्रेडिएंट उदाहरण

यहाँ, हम लाइनियर ग्रेडिएंट को इमेज के मास्क लेयर के रूप में इस्तेमाल करते हैं। यह लाइनियर ग्रेडिएंट ऊपर से (श्वेत) नीचे (अस्पष्ट) तक है:

उदाहरण

लाइनियर ग्रेडिएंट के रूप में मास्क लेयर का इस्तेमाल करते हैं:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

स्वयं का प्रयोग करें

यहाँ, हम लाइनियर ग्रेडिएंट और टेक्स्ट मास्क को इमेज के मास्क लेयर के रूप में इस्तेमाल करते हैं:

उदाहरण

साथ ही, लाइनियर ग्रेडिएंट और टेक्स्ट मास्क के रूप में मास्क लेयर का इस्तेमाल करते हैं:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

स्वयं का प्रयोग करें

आयामिक ग्रेडिएंट उदाहरण

यहाँ, हम आयामिक ग्रेडिएंट (वृत्ताकार आकार) को इमेज के मास्क लेयर के रूप में इस्तेमाल करते हैं:

उदाहरण

आयामिक ग्रेडिएंट के रूप में मास्क लेयर (वृत्ताकार):

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

स्वयं का प्रयोग करें

यहाँ, हम रेडियल ग्रेडिएंट (अभिमुखी रूपाकार) को छवि के छाया पायरा के रूप में उपयोग करते हैं:

उदाहरण

एक अन्य वृत्ताकार रूपाकार वाला रेडियल ग्रेडिएंट को छाया पायरा के रूप में उपयोग करें (अभिमुखी):

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

स्वयं का प्रयोग करें

SVG का उपयोग छाया पायरा के रूप में

SVG <mask> एलीमेंट SVG ग्राफिक्स के अंदर उपयोग में लाया जा सकता है, ताकि छाया प्रभाव बनाया जा सके。

यहाँ, हम SVG <mask> एलीमेंट का उपयोग करके छवि के लिए विभिन्न छाया पायरा बनाते हैं:

उदाहरण

एक त्रिकोणाकार रूपाकार वाला SVG छाया पायरा (त्रिकोण):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

स्वयं का प्रयोग करें

उदाहरण

एक तारा रूपाकार वाला SVG छाया पायरा (तारा):

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

स्वयं का प्रयोग करें

उदाहरण

एक चक्राकार रूपाकार वाला SVG छाया पायरा (गोला):

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

स्वयं का प्रयोग करें