विज़ुअल टेक्सचर वाला कॉन्टेंट

खास जानकारी

किसी एलिमेंट पर मौसम या टेक्सचर के पैटर्न (जैसे, ग्रंज, नॉइज़ या पेपर टेक्सचर) को असल दिखाने के लिए, बार-बार दिखने वाली टेक्सचर इमेज के साथ सीएसएस मास्किंग (mask-image) का इस्तेमाल करें. इससे कॉन्टेंट के कुछ हिस्सों को सेमी-ट्रांसपैरंट बनाकर, उसे टेक्सचर्ड लुक दिया जा सकता है. इसके लिए, कॉन्टेंट के ऊपर टेक्सचर ओवरले करने की ज़रूरत नहीं पड़ती. इससे, मटीरियल ज़्यादा असली दिखता है.

लागू करना

टेक्सचर पैटर्न लागू करने के लिए:

पहला तरीका: बार-बार दिखने वाली रास्टर इमेज का इस्तेमाल करना (असल टेक्सचर के लिए सुझाया गया तरीका)

यह रीयल टेक्सचर के लिए सबसे आम तरीका है.

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

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

सीएसएस ग्रेडिएंट का इस्तेमाल करके पैटर्न जनरेट किए जा सकते हैं. यह अपने-आप में पूरी होती है और इसके लिए बाहरी इमेज फ़ाइलों की ज़रूरत नहीं होती.

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

ऐल्फ़ा बनाम ल्यूमिनेंस मास्किंग मोड

डिफ़ॉल्ट रूप से, सीएसएस मास्क mask-mode: match-source का इस्तेमाल करते हैं. इसका मतलब है कि ब्राउज़र अपने-आप तय करता है कि मास्क के ऐल्फ़ा चैनल (पारदर्शिता) का इस्तेमाल करना है या ल्यूमिनेंस (चमक) का. यह इस बात पर निर्भर करता है कि आपने किस तरह का सोर्स दिया है:

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

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

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

/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}