Weiche Kanten, Inhalte ausblenden

Übersicht

Wenn Sie einen Transparenzverlauf auf die Ränder eines Containers anwenden möchten (z.B. um anzuzeigen, dass mehr Inhalte zum Scrollen verfügbar sind, oder um Text auszublenden), verwenden Sie CSS-Maskierung mit einem linearen Farbverlauf. Dieser Ansatz ist besser als die Verwendung eines halbtransparenten Overlays, da der Inhalt selbst ausgeblendet wird. So kann der Hintergrund auf natürliche Weise durchscheinen, ohne die Textauswahl oder Zeigerereignisse zu beeinträchtigen.

Implementierung

So implementieren Sie eine weiche Kantenüberblendung:

Ausblenden des unteren Rands eines Containers

Das ist nützlich, um anzuzeigen, dass sich in einem scrollbaren Bereich weiter unten noch mehr Inhalte befinden.

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

Obere und untere Kante ausblenden

Sie können einen einzelnen Farbverlauf mit mehreren Farbstopps verwenden, um beide Kanten auszublenden.

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

Fallback-Strategien

Wenn ein Browser mask-image oder die Version mit Präfix nicht unterstützt:

• Der Inhalt wird nicht ausgeblendet und mit scharfen Kanten angezeigt.
• Achten Sie darauf, dass die Benutzeroberfläche auch ohne die Einblendung funktionsfähig ist und der Inhalt lesbar bleibt (progressive Verbesserung).
• Sie können ein halbtransparentes Overlay als Fallback verwenden. Beachten Sie jedoch, dass Sie dazu die Hintergrundfarbe kennen müssen und dass dies die Textauswahl beeinträchtigen kann, sofern nicht pointer-events: none verwendet wird.

/* 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 */
  }
}