सॉफ़्ट एज कॉन्टेंट फ़ेड

खास जानकारी

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

लागू करना

सॉफ़्ट एज फ़ेड लागू करने के लिए:

कंटेनर के निचले किनारे को फ़ेड करना

यह बताने के लिए काम का है कि स्क्रोल किए जा सकने वाले हिस्से में नीचे और भी कॉन्टेंट मौजूद है.

.container {
  /* Enable scrolling */
  overflow-y: auto;
  
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  
  /* Standard property for modern browsers */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

सबसे ऊपर और सबसे नीचे के किनारों को फ़ेड करना

दोनों किनारों को फ़ेड करने के लिए, एक से ज़्यादा कलर स्टॉप वाले सिंगल ग्रेडिएंट का इस्तेमाल किया जा सकता है.

.dual-fade-container {
  /* Content is visible between 10% and 90% of the height */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

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

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

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

/* Fallback using an overlay for browsers that do not support masking */
@supports (not (mask-image: linear-gradient(to bottom, black, transparent))) and (not (-webkit-mask-image: linear-gradient(to bottom, black, transparent))) {
  .container {
    position: relative;
  }
  
  .container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    /* Fallback assumes a solid background color (e.g., white) */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Allow interaction with text underneath */
  }
}