Il mascheramento CSS ti offre la possibilità di utilizzare un'immagine come livello 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 tagli un elemento utilizzando la proprietà clip-path, l'area ritagliata diventa invisibile.
Se invece vuoi rendere opaca parte dell'immagine o applicarvi un altro effetto, devi utilizzare il mascheramento.
Questo post spiega come utilizzare la proprietà mask-image in CSS,
che consente di specificare un'immagine da utilizzare come livello maschera.
Avrai a disposizione tre opzioni. Puoi utilizzare un file immagine come maschera, SVG o gradiente.
Compatibilità del browser
La maggior parte dei browser supporta solo parzialmente la proprietà di mascheramento CSS standard.
Per ottenere la migliore compatibilità del browser, dovrai utilizzare il prefisso -webkit- oltre alla proprietà standard.
Per informazioni complete sul supporto del browser, consulta Posso utilizzare le maschere CSS?.
Sebbene il supporto dei browser con la proprietà con prefisso sia positivo, quando utilizzi il mascheramento per rendere visibile il testo sopra un'immagine, fai attenzione a ciò che succede se il mascheramento non è disponibile.
Potrebbe essere utile utilizzare query sulle funzionalità per rilevare il supporto di mask-image o -webkit-mask-image
e fornire un elemento di riserva 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 trasmettere un'immagine.
L'immagine della maschera deve avere un'area trasparente o semitrasparente.
Se selezioni un'area completamente trasparente, la parte dell'immagine sottostante sarà invisibile. Se utilizzi un'area semitrasparente, tuttavia, parte dell'immagine originale potrà essere visualizzata. Puoi vedere la differenza nel Glitch di seguito. La prima immagine è l'immagine originale dei fumetti senza maschera. Alla seconda immagine è applicata una maschera con una stella bianca su uno sfondo completamente trasparente. La terza immagine ha una stella bianca su uno sfondo con una trasparenza sfumata.
In questo esempio utilizzo anche la proprietà mask-size con un valore di cover.
Questa proprietà funziona come background-size.
Puoi utilizzare le parole chiave cover e contain oppure puoi assegnare una dimensione allo sfondo utilizzando qualsiasi unità di lunghezza valida o una percentuale.
Puoi anche ripetere la maschera così come si potrebbe ripetere un'immagine di sfondo, in modo da utilizzare una piccola immagine come motivo ricorrente.
Mascheramento con SVG
Anziché utilizzare un file immagine come maschera, puoi utilizzare il formato SVG.
Ci sono due modi per farlo.
Il primo consiste nell'avere un elemento <mask> all'interno del file 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. Sfortunatamente, Firefox è l'unico browser che supporta questo approccio.
Tuttavia, nel caso del mascheramento di un'immagine più comune, possiamo includere l'immagine nel file SVG.
Mascheramento con un gradiente
L'utilizzo di un gradiente CSS come maschera è un modo elegante per ottenere un'area mascherata senza dover creare un'immagine o un file SVG.
Ad esempio, un semplice gradiente lineare utilizzato 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 libero sfogo alla tua creatività. Nel prossimo esempio viene utilizzato un gradiente radiale per creare una maschera circolare che illumina dietro la didascalia.
Utilizzo di più maschere
Come per le immagini di sfondo, puoi specificare più origini delle maschere, combinandole per ottenere l'effetto desiderato. Questo è particolarmente utile se vuoi utilizzare un pattern generato con gradienti CSS come maschera. In genere utilizzano più immagini di sfondo e quindi possono essere tradotte facilmente in una maschera.
Ad esempio, in questo articolo ho trovato un bel motivo a scacchiera. Il codice, che utilizza 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 in una maschera questo o qualsiasi altro pattern progettato per le immagini di sfondo, dovrai 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;
Ci sono dei bellissimi effetti da applicare applicando motivi di gradiente alle immagini. Prova a fare il remix di Glitch e a testare altre varianti.
Insieme al ritaglio, le maschere CSS sono un modo per aggiungere interesse alle immagini e ad altri elementi HTML senza dover utilizzare un'applicazione di grafica.
Foto di Julio Rionaldo su Unsplash.