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.
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
Sebbene la mascheratura CSS sia di recente disponibilità come base di riferimento, la maggior parte delle funzionalità di mask-image
è disponibile nelle versioni precedenti del browser che utilizzano il prefisso -webkit-mask-image.
Gli esempi riportati di seguito mostrano come utilizzare entrambe le proprietà per un supporto ottimale dei browser.
Maschera 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 nel seguente CodePen.
- 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.
Questo esempio utilizza anche la proprietà mask-size con un valore di cover.
Questa proprietà funziona nello stesso modo di background-size.
Utilizza le parole chiave cover e contain oppure specifica le dimensioni dello sfondo 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.
Maschera 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.
.container img {
-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.
Per lo scenario più comune di mascheramento di un'immagine,
puoi includere l'immagine nel file SVG.
Il primo approccio è che la versione di base appena disponibile, inclusa l'immagine nell'SVG, è supportata dai browser meno recenti che supportano la versione con prefisso -webkit.
Maschera 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 sfumatura lineare utilizzata come maschera può 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.
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, in questo pattern con gradienti CSS è presente un motivo a scacchiera. 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 da realizzare applicando motivi gradiente alle immagini. Prova alcune altre varianti eseguendo il fork del seguente CodePen.
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.