Dissolvenza dei contenuti con bordi sfumati

Panoramica

Per applicare una sfumatura di trasparenza ai bordi di un contenitore (ad esempio, per indicare che sono disponibili altri contenuti da scorrere o per sfumare il testo), utilizza il mascheramento CSS con una sfumatura lineare. Questo approccio è migliore rispetto all'utilizzo di un overlay semitrasparente perché sfuma effettivamente i contenuti stessi, consentendo allo sfondo di trasparire in modo naturale senza interferire con la selezione del testo o gli eventi del puntatore.

Implementazione

Per implementare una dissolvenza con bordi sfumati:

Dissolvenza del bordo inferiore di un container

Questo è utile per indicare che ci sono altri contenuti sotto in un'area scorrevole.

.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%);
}

Dissolvenza dei bordi superiore e inferiore

Puoi utilizzare un singolo gradiente con più punti di colore per sfumare entrambi i bordi.

.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%);
}

Strategie di riserva

Se un browser non supporta mask-image o la versione con prefisso:

• I contenuti non sbiadiranno e verranno visualizzati con bordi nitidi.
• Assicurati che l'interfaccia sia ancora funzionale e che i contenuti siano leggibili senza la dissolvenza (potenziamento progressivo).
• Puoi utilizzare un overlay semitrasparente come opzione di riserva, ma tieni presente che richiede la conoscenza del colore di sfondo e potrebbe interferire con la selezione del testo, a meno che non venga utilizzato 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 */
  }
}