जटिल आकार

खास जानकारी

ब्रश स्ट्रोक या ऑर्गैनिक टेक्सचर जैसे जटिल, फ़्री-फ़ॉर्म शेप में एलिमेंट को क्लिप करने के लिए, सीएसएस मास्किंग (mask-image) का इस्तेमाल करें. clip-path, ज्यामितीय शेप या वेक्टर पाथ के लिए बेहतरीन है. वहीं, mask-image की मदद से, इमेज (जैसे, ट्रांसपेरेंसी वाले PNG) या SVG का इस्तेमाल करके, किसी एलिमेंट के दिखने वाले हिस्से को तय किया जा सकता है. यह तरीका ज़्यादा असरदार है, क्योंकि इसमें सेमी-ट्रांसपेरेंसी की सुविधा मिलती है. इससे सॉफ़्ट एज और मुश्किल टेक्सचर बनाए जा सकते हैं. इन्हें clip-path की मदद से बनाना मुश्किल या नामुमकिन होता है.

लागू करना

सीएसएस मास्क का इस्तेमाल करके जटिल आकार लागू करने के लिए:

किसी इमेज से पारदर्शिता का इस्तेमाल करना

किसी इमेज की पारदर्शिता को मास्क के तौर पर इस्तेमाल किया जा सकता है. इसमें अपारदर्शी हिस्से दिखते हैं और पारदर्शी हिस्से छिपे रहते हैं. यह PNG, SVG या ट्रांसपेरेंसी वाली कोई अन्य इमेज हो सकती है. इसके अलावा, यह जनरेटिव इमेज भी हो सकती है, जैसे कि सीएसएस ग्रेडिएंट.

.shaped-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('mask.svg');
  -webkit-mask-size: cover; /* Scale mask to cover element */
  -webkit-mask-repeat: no-repeat; /* Do not tile the mask */

  /* Standard property for modern browsers */
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

एचटीएमएल में एसवीजी एलिमेंट का इस्तेमाल करना

अपने पेज के एचटीएमएल में इनलाइन एसवीजी में तय किए गए <mask> एलिमेंट का रेफ़रंस भी दिया जा सकता है. maskContentUnits="objectBoundingBox" का इस्तेमाल करें, ताकि मास्क का स्केल एलिमेंट के साइज़ के हिसाब से अपने-आप बदल जाए. इससे ब्राउज़र को मास्क के अंदर मौजूद सभी निर्देशांकों को ऐब्सलूट पिक्सल के बजाय, 0 से 1 के बीच के फ़्रैक्शन के तौर पर समझने का निर्देश मिलता है. जैसे, 50% के लिए 0.5.

ल्यूमिनेंस बनाम ऐल्फ़ा मास्किंग: डिफ़ॉल्ट रूप से, एसवीजी मास्क अपारदर्शिता तय करने के लिए ल्यूमिनेंस (चमक) का इस्तेमाल करते हैं. इसमें सफ़ेद रंग से कॉन्टेंट दिखता है, काले रंग से छिपता है, और स्लेटी रंग से कॉन्टेंट आधा पारदर्शी दिखता है. अगर आपको मास्क के लिए, अपने SVG शेप के ऐल्फ़ा चैनल (पारदर्शिता) का इस्तेमाल करना है, तो अपनी सीएसएस में mask-type: alpha; या सीधे SVG <mask> एलिमेंट पर mask-type="alpha" डालें.

<!-- White areas reveal content, gray creates semi-transparency, black or transparent hides it -->
<svg width="0" height="0">
  <defs>
    <!-- objectBoundingBox scales mask coordinates (0 to 1) with the element's size -->
    <mask id="custom-shape" maskContentUnits="objectBoundingBox">
      <!-- Use white shapes to define fully opaque areas -->
      <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      <!-- Use gray shapes to define semi-transparent/faded areas -->
      <circle cx="0.5" cy="0.5" r="0.25" fill="gray" />
    </mask>
  </defs>
</svg>

<div class="masked-content">
  <!-- Content to be masked -->
</div>

<style>
.masked-content {
  /* Reference the SVG mask ID */
  -webkit-mask-image: url(#custom-shape);
  mask-image: url(#custom-shape);
}
</style>

फ़ॉलबैक रणनीतियां

अगर कोई ब्राउज़र mask-image या प्रीफ़िक्स वाले वर्शन के साथ काम नहीं करता है, तो:

• एलिमेंट को क्लिप नहीं किया जाएगा और वह सामान्य रेक्टैंगल के तौर पर दिखेगा.
• पक्का करें कि कॉन्टेंट अब भी पढ़ा जा सकता हो और मास्क के बिना लेआउट न टूटे (प्रोग्रेसिव एन्हांसमेंट).
• इसके अलावा, clip-path के साथ आसान फ़ॉलबैक शेप देने के लिए, सुविधा की पहचान करने की सुविधा का इस्तेमाल करें.

/* Fallback for browsers that do not support masking */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .shaped-element {
    /* Use a simple rounded rectangle as fallback */
    clip-path: inset(5% round 15px);
  }
}