Content vervagen met zachte rand

Overzicht

Als je een transparantieverloop wilt toepassen op de randen van een container (bijvoorbeeld om aan te geven dat er meer content beschikbaar is om te scrollen of om tekst te laten vervagen), gebruik je CSS-maskering met een lineaire kleurovergang. Deze aanpak is beter dan een semi-transparante overlay gebruiken, omdat de content zelf vervaagt. Hierdoor is de achtergrond op een natuurlijke manier zichtbaar zonder dat dit de tekstselectie of aanwijzergebeurtenissen verstoort.

Implementatie

Zo implementeer je een vervaging met zachte randen:

De onderrand van een container vervagen

Dit is handig om aan te geven dat er meer content onderaan staat in een scrollbaar gebied.

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

Zowel de boven- als de onderrand vervagen

Je kunt één kleurovergang met meerdere kleurstops gebruiken om beide randen te vervagen.

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

Reservestrategieën

Als een browser mask-image of de versie met voorvoegsel niet ondersteunt, gebeurt het volgende:

• De content vervaagt niet en wordt met scherpe randen getoond.
• Zorg dat de interface nog steeds functioneel is en dat de content leesbaar is zonder de vervaging (progressive enhancement).
• U kunt een semi-transparante overlay als alternatief gebruiken, maar houd er rekening mee dat u de achtergrondkleur moet weten en dat dit de tekstselectie kan verstoren, tenzij u pointer-events: none gebruikt.

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