विज़ुअल इफ़ेक्ट

डेप्थ और टेक्स्चर

• डेप्थ इफ़ेक्ट को असली जैसा दिखाने के लिए, कई शैडो को लेयर करें.
• अगर इमेज रेक्टैंगल शेप में नहीं है या पारदर्शी PNG है, तो box-shadow के बजाय filter: drop-shadow() का इस्तेमाल करें.
• लाइटिंग ओवरले के लिए, mix-blend-mode और background-blend-mode का इस्तेमाल करें (isolation: isolate की मदद से स्कोप को सीमित करें)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

ग्रेडिएंट और color-mix()

ग्रेडिएंट या color-mix() के लिए, इंटरपोलेशन कलर स्पेस को साफ़ तौर पर बताने के लिए, in oklch या in oklab का इस्तेमाल करें.

• in oklch क्रोमा को बेहतर तरीके से सुरक्षित रखता है. हालांकि, यह डिवाइस के गैमट से आसानी से बाहर निकल सकता है. खास तौर पर, रंगों के बीच ज़्यादा अंतर होने पर ऐसा होता है
• in oklab, गैमट में ज़्यादा आसानी से रहता है (यह मानते हुए कि एंडपॉइंट, गैमट में हैं). हालांकि, यह बीच में हल्के रंग बना सकता है. खास तौर पर, जब अलग-अलग ह्यू के बीच इंटरपोलेट किया जाता है.
• in srgb का इस्तेमाल न करें. हालांकि, अगर आपके पास ऐसा करने की कोई खास वजह है, तो इसका इस्तेमाल किया जा सकता है. जैसे, अगर आपको कोई ऐसा कलर पिकर बनाना है जिसे srgb में इंटरपोलेट करना ज़रूरी है.

फ़ॉलबैक

साल 2024 से पहले के कुछ ब्राउज़र, ग्रेडिएंट कलर इंटरपोलेशन स्पेस के साथ काम नहीं करते. इन ब्राउज़र के साथ काम करने के लिए, टोकन का इस्तेमाल सिर्फ़ तब करें, जब उसका इस्तेमाल सुरक्षित हो. इसके लिए, एक वैरिएबल तय करें:

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

इसके बाद, इस तरह इस्तेमाल करें:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• अहम जानकारी: इस तकनीक का इस्तेमाल करने पर, पक्का करें कि ग्रेडिएंट प्रीऐंबल हमेशा मौजूद हो. ऐसा न होने पर, पुराने ब्राउज़र में सिंटैक्स गड़बड़ी होगी.
• color-mix() के लिए, आपको इसकी ज़रूरत नहीं है. अगर कोई ब्राउज़र color-mix() के साथ काम करता है, तो वह इसके in <color-space> आर्ग्युमेंट के साथ भी काम करता है.

पैटर्न

सीएसएस ग्रेडिएंट + हार्ड स्टॉप की मदद से कई पैटर्न बनाए जा सकते हैं. ये एसवीजी या बाहरी इमेज की तुलना में ज़्यादा फ़्लेक्सिबल और बेहतर हो सकते हैं. इसकी वजह यह है कि इनके पास आस-पास के कॉन्टेक्स्ट से सीएसएस वैरिएबल और लंबाई का ऐक्सेस हो सकता है. आपको पोज़िशन को दो बार दोहराने की ज़रूरत नहीं है — बस 0 या 0% का इस्तेमाल करें. ग्रेडिएंट फ़िक्सअप इसे अपने-आप अडजस्ट कर देगा.

यहां कुछ उदाहरण दिए गए हैं.

हर वर्टिकल स्ट्राइप की चौड़ाई 1em होनी चाहिए:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

1em चौड़ाई वाली डायगनल स्ट्राइप:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

1em स्क्वेयर वाला चेकरबोर्ड पैटर्न:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

.5em रेडियस वाले पोल्का डॉट, जो एक-दूसरे से 2em की दूरी पर हैं (हॉरिज़ॉन्टल/वर्टिकल — डायगनल दूरी के लिए sqrt(2) से गुणा करें):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

सिंपल पाई चार्ट:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

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