Applica effetti alle immagini con la proprietà mask-image del CSS

Il mascheramento CSS ti offre la possibilità di utilizzare un'immagine come livello di maschera. Ciò significa che puoi utilizzare un'immagine, un SVG o un gradiente come maschera per creare effetti interessanti senza un editor di immagini.

Rachel Andrew

Quando ritagli un elemento utilizzando la proprietà clip-path, l'area ritagliata diventa invisibile. Se invece vuoi rendere opaca parte dell'immagine o applicare un altro effetto, devi utilizzare la maschera. Questo post spiega come utilizzare la proprietà mask-image in CSS, che consente di specificare un'immagine da utilizzare come livello di maschera. Hai a disposizione tre opzioni. Puoi utilizzare un file immagine come maschera, un SVG o una sfumatura.

Compatibilità del browser

La maggior parte dei browser supporta solo parzialmente la proprietà di mascheramento CSS standard. Per ottenere la migliore compatibilità con i browser, dovrai utilizzare il prefisso -webkit- oltre alla proprietà standard. Per informazioni complete sul supporto dei browser, consulta Posso utilizzare le maschere CSS?

Sebbene il supporto del browser che utilizza la proprietà con prefisso sia buono, quando utilizzi il mascheramento per rendere visibile il testo sopra un'immagine, tieni presente cosa succederà se il mascheramento non è disponibile. Potrebbe essere utile utilizzare le query sulle funzionalità per rilevare il supporto di mask-image o -webkit-mask-image e fornire un valore alternativo leggibile prima di aggiungere la versione mascherata.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

Mascheramento con un'immagine

La proprietà mask-image funziona in modo simile alla proprietà background-image. Utilizza un valore url() per passare un'immagine. L'immagine della maschera deve avere un'area trasparente o semitrasparente.

Un'area completamente trasparente rende invisibile la parte dell'immagine sottostante. Tuttavia, l'utilizzo di un'area semitrasparente consente di vedere parte dell'immagine originale. Puoi vedere la differenza nell'errore di seguito. La prima immagine è l'immagine originale dei palloncini senza maschera. Alla seconda immagine è stata applicata una maschera con una stella bianca su uno sfondo completamente trasparente. La terza immagine mostra una stella bianca su uno sfondo con trasparenza sfumata.

In questo esempio utilizzo anche la proprietà mask-size con un valore cover. Questa proprietà funziona nello stesso modo di background-size. Puoi utilizzare le parole chiave cover e contain oppure assegnare allo sfondo una dimensione utilizzando qualsiasi unità di misura della lunghezza valida o una percentuale.

Puoi anche ripetere la maschera come faresti con un'immagine di sfondo, per utilizzare una piccola immagine come motivo ripetuto.

Mascheratura con SVG

Anziché utilizzare un file immagine come maschera, puoi utilizzare un file SVG. Esistono diversi modi per farlo. La prima consiste nell'avere un elemento <mask> all'interno dell'SVG e fare riferimento all'ID di quell'elemento nella proprietà mask-image.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

Il vantaggio di questo approccio è che la maschera può essere applicata a qualsiasi elemento HTML, non solo a un'immagine. Purtroppo Firefox è l'unico browser che supporta questo approccio.

Tuttavia, non tutto è perduto, poiché per lo scenario più comune di mascheramento di un'immagine, possiamo includere l'immagine nel file SVG.

Mascheramento con una sfumatura

L'utilizzo di una sfumatura CSS come maschera è un modo elegante per ottenere un'area mascherata senza dover creare un'immagine o un SVG.

Ad esempio, una semplice sfumatura lineare utilizzata come maschera potrebbe garantire che la parte inferiore di un'immagine non sia troppo scura sotto una didascalia.

Puoi utilizzare uno qualsiasi dei tipi di gradiente supportati e dare sfogo alla tua creatività. Questo esempio utilizza un gradiente radiale per creare una maschera circolare che illumini la parte dietro la didascalia.

Utilizzo di più maschere

Come per le immagini di sfondo, puoi specificare più origini maschera, combinandole per ottenere l'effetto desiderato. Questo è particolarmente utile se vuoi utilizzare come maschera un motivo generato con le sfumature CSS. In genere, utilizzano più immagini di sfondo e possono essere facilmente tradotte in una maschera.

Ad esempio, ho trovato un bel motivo a scacchiera in questo articolo. Il codice che utilizza le immagini di sfondo ha il seguente aspetto:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Per trasformare questo o qualsiasi altro motivo progettato per le immagini di sfondo in una maschera, dovresti sostituire le proprietà background-* con le proprietà mask pertinenti, incluse quelle con prefisso -webkit.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Esistono alcuni effetti davvero belli che si possono ottenere applicando motivi con gradiente alle immagini. Prova a fare il remix del glitch e a testare altre varianti.

Oltre al ritaglio, le maschere CSS sono un modo per aggiungere interesse alle immagini e ad altri elementi HTML senza dover utilizzare un'applicazione grafica.

Foto di Julio Rionaldo su Unsplash.