Contenuti con texture visiva

Funzionalità web: Maschere

Panoramica

Per applicare pattern di texture o effetti di invecchiamento realistici (come grunge, rumore o texture della carta) a un elemento, utilizza il mascheramento CSS (mask-image) con un'immagine di texture ripetuta. In questo modo, puoi dare ai contenuti stessi un aspetto strutturato rendendone alcune parti semitrasparenti, anziché sovrapporre semplicemente una texture. In questo modo, l'aspetto dei materiali fisici è più realistico.

Implementazione

Per applicare un motivo di texture:

Questo è il metodo più comune per le texture realistiche.

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

Metodo 2: utilizza i gradienti CSS per i pattern geometrici

Puoi generare pattern utilizzando i gradienti CSS. È indipendente e non richiede file immagine esterni.

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

Modalità di mascheramento alfa e della luminanza

Per impostazione predefinita, le maschere CSS utilizzano mask-mode: match-source. Ciò significa che il browser decide automaticamente se utilizzare il canale alfa (trasparenza) o la luminanza (luminosità) della maschera in base al tipo di sorgente che fornisci:

Tipo di origine maschera Modalità di mascheramento predefinita Comportamento di mascheramento
Elemento SVG <mask> in linea luminance L'opacità è determinata dalla luminosità dei colori. Il bianco rivela i contenuti, il nero li nasconde e il grigio crea una semitrasparenza.
File immagine diretto (ad es. file PNG, SVG) alpha L'opacità è determinata dalla trasparenza. Le parti opache rivelano i contenuti, mentre quelle trasparenti li nascondono.
CSS Gradient alpha L'opacità è determinata dalla trasparenza. I colori opachi (come black) mostrano i contenuti, mentre i colori trasparenti li nascondono.

Strategie di riserva

Se un browser non supporta mask-image o la versione con prefisso:

  • L'elemento verrà visualizzato senza la texture (riempimento pulito e uniforme).
  • Assicurati che i contenuti siano comunque leggibili senza la texture (potenziamento progressivo).
  • Puoi utilizzare un'immagine di sfondo o un overlay come opzione di riserva per simulare la texture, anche se non influirà sulla trasparenza dei contenuti stessi.
/* 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 */
  }
}