Fondu du contenu sur les bords

Présentation

Pour appliquer un dégradé de transparence aux bords d'un conteneur (par exemple, pour indiquer que d'autres contenus sont disponibles en faisant défiler la page ou pour estomper du texte), utilisez le masquage CSS avec un dégradé linéaire. Cette approche est préférable à l'utilisation d'une superposition semi-transparente, car elle estompe réellement le contenu lui-même, ce qui permet à l'arrière-plan de transparaître naturellement sans interférer avec la sélection de texte ou les événements de pointeur.

Implémentation

Pour implémenter un fondu à bordure douce :

Fondu du bord inférieur d'un conteneur

Cela permet d'indiquer qu'il y a plus de contenu en dessous dans une zone à faire défiler.

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

Fondu des bords supérieur et inférieur

Vous pouvez utiliser un seul dégradé avec plusieurs arrêts de couleur pour estomper les deux bords.

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

Stratégies de remplacement

Si un navigateur n'est pas compatible avec mask-image ou la version préfixée :

• Le contenu ne s'estompera pas et s'affichera avec des bords nets.
• Assurez-vous que l'interface reste fonctionnelle et que le contenu est lisible sans le fondu (amélioration progressive).
• Vous pouvez utiliser une superposition semi-transparente comme solution de secours, mais sachez que cela nécessite de connaître la couleur d'arrière-plan et peut interférer avec la sélection de texte, sauf si pointer-events: none est utilisé.

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