Contenu visuel texturé

Fonctionnalités Web : Masques

Présentation

Pour appliquer des motifs de texture ou d'altération réalistes (comme une texture grunge, du bruit ou une texture papier) à un élément, utilisez le masquage CSS (mask-image) avec une image de texture répétée. Cela vous permet de donner une texture au contenu lui-même en rendant certaines parties semi-transparentes, plutôt que de simplement superposer une texture. Cela crée une apparence de matériau physique plus réaliste.

Implémentation

Pour appliquer un motif de texture :

C'est la méthode la plus courante pour les textures réalistes.

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

Méthode 2 : Utiliser des dégradés CSS pour les motifs géométriques

Vous pouvez générer des motifs à l'aide de dégradés CSS. Il est autonome et ne nécessite pas de fichiers image externes.

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Modes de masquage Alpha et Luminance

Par défaut, les masques CSS utilisent mask-mode: match-source. Cela signifie que le navigateur décide automatiquement d'utiliser le canal alpha (transparence) ou la luminance (luminosité) du masque en fonction du type de source que vous fournissez :

Type de source du masque Mode de masquage par défaut Comportement de masquage
Élément SVG <mask> intégré luminance L'opacité est déterminée par la luminosité des couleurs. Le blanc révèle le contenu, le noir le masque et le gris crée une semi-transparence.
Fichier image direct (par exemple, fichier PNG ou SVG) alpha L'opacité est déterminée par la transparence. Les parties opaques révèlent le contenu, tandis que les parties transparentes le masquent.
Dégradé CSS alpha L'opacité est déterminée par la transparence. Les couleurs opaques (comme black) révèlent le contenu, tandis que les couleurs transparentes le masquent.

Stratégies de remplacement

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

  • L'élément s'affichera sans la texture (remplissage net et uni).
  • Assurez-vous que le contenu reste lisible sans la texture (amélioration progressive).
  • Vous pouvez utiliser une image de fond ou une superposition comme solution de secours pour simuler la texture, même si cela n'affectera pas la transparence du contenu lui-même.
/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}