Contenido con textura visual

Funciones web: Máscaras

Descripción general

Para aplicar patrones de textura o desgaste realistas (como grunge, ruido o textura de papel) a un elemento, usa el enmascaramiento de CSS (mask-image) con una imagen de textura repetida. Esto te permite hacer que el contenido en sí parezca texturizado, ya que algunas partes se vuelven semitransparentes, en lugar de simplemente superponer una textura. Esto crea una apariencia de material físico más realista.

Implementación

Para aplicar un patrón de textura, sigue estos pasos:

Este es el método más común para las texturas realistas.

.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étodo 2: Usa gradientes de CSS para patrones geométricos

Puedes generar patrones con gradientes de CSS. Es independiente y no requiere archivos de imagen externos.

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

Modos de máscara alfa y de luminancia

De forma predeterminada, las máscaras de CSS usan mask-mode: match-source. Esto significa que el navegador decide automáticamente si usar el canal alfa (transparencia) o la luminancia (brillo) de la máscara según el tipo de fuente que proporciones:

Tipo de fuente de máscara Modo de máscara predeterminado Comportamiento de enmascaramiento
Elemento <mask> de SVG intercalado luminance La opacidad se determina por el brillo de los colores. El blanco revela el contenido, el negro lo oculta y el gris crea semitransparencia.
Archivo de imagen directo (p.ej., archivo PNG o SVG) alpha La opacidad se determina por la transparencia. Las partes opacas revelan el contenido, y las partes transparentes lo ocultan.
CSS Gradient alpha La opacidad se determina por la transparencia. Los colores opacos (como black) revelan el contenido, y los colores transparentes lo ocultan.

Estrategias de resguardo

Si un navegador no admite mask-image ni la versión con prefijo, haz lo siguiente:

  • El elemento se mostrará sin la textura (relleno limpio y sólido).
  • Asegúrate de que el contenido siga siendo legible sin la textura (mejora progresiva).
  • Puedes usar una imagen de fondo o una superposición como resguardo para simular la textura, aunque no afectará la transparencia del contenido en sí.
/* 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 */
  }
}