Il mascheramento CSS 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 ritagli un elemento utilizzando la proprietà clip-path, l'area ritagliata diventa invisibile.
Se invece vuoi rendere parte dell'immagine opaca o applicare altri effetti, devi utilizzare il mascheramento.
Questo post spiega come utilizzare la proprietà mask-image in CSS,
che ti permette di specificare un'immagine da utilizzare come livello maschera.
Hai 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.
Devi utilizzare il prefisso -webkit- oltre alla proprietà standard per ottenere la migliore compatibilità del browser.
Consulta la sezione Posso utilizzare le maschere CSS? per informazioni complete sul supporto dei browser.
Sebbene il supporto dei browser per l'utilizzo
della proprietà con prefisso sia buono,
quando utilizzi il mascheramento per rendere visibile il testo sopra un'immagine, prenditi cura di cosa accadrà se il mascheramento non è disponibile.
Potrebbe valere la pena utilizzare le query sulle funzionalità per rilevare il supporto di mask-image o -webkit-mask-image
e fornire un fallback 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() da trasmettere in un'immagine.
L'immagine della maschera deve avere un'area trasparente o semitrasparente.
Un'area completamente trasparente renderà invisibile la parte dell'immagine sottostante. L'utilizzo di un'area semitrasparente consentirà comunque di far emergere parte dell'immagine originale. Puoi vedere la differenza nel Glitch di seguito. La prima immagine è quella originale di palloncini 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 gradiente.
In questo esempio utilizzo anche la proprietà mask-size con valore cover.
Questa proprietà funziona come background-size.
Puoi utilizzare le parole chiave cover e contain oppure assegnare una dimensione allo sfondo utilizzando qualsiasi unità di lunghezza valida o una percentuale.
Puoi anche ripetere la maschera come per un'immagine di sfondo, per utilizzare una piccola immagine come sequenza ricorrente.
Mascheramento con SVG
Anziché usare un file immagine come maschera, puoi usare 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. Purtroppo Firefox è l'unico browser che supporta questo approccio.
Non tutto però è perduto, come nel caso dello scenario più comune di mascherare un'immagine, possiamo includere l'immagine nel file SVG.
Mascheramento con una sfumatura
L'utilizzo di un gradiente CSS come maschera è un modo elegante per ottenere un'area mascherata senza dover creare un'immagine o un SVG.
Ad esempio, un semplice gradiente lineare utilizzato come maschera può garantire che la parte inferiore di un'immagine non sia troppo scura sotto una didascalia.
Puoi utilizzare qualsiasi tipo di gradiente supportato, con la creatività che preferisci. Il prossimo esempio utilizza un gradiente radiale per creare una maschera circolare che si illumina dietro la didascalia.
Utilizzo di più maschere
Come per le immagini di sfondo, puoi specificare più origini di maschera, combinarle per ottenere l'effetto che vuoi. Ciò è particolarmente utile se vuoi utilizzare come maschera un pattern generato con sfumature CSS. Queste in genere utilizzano più immagini di sfondo e possono quindi essere facilmente tradotte in una maschera.
Ad esempio, in questo articolo ho trovato un bel motivo a scacchiera. Il codice, utilizzando 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 in una maschera questo o qualsiasi altro pattern progettato per le immagini di sfondo, procedi nel seguente modo:
devi sostituire le proprietà background-* con le proprietà mask pertinenti,
inclusi quelli 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 alcuni effetti davvero interessanti da creare applicando motivi di gradiente alle immagini. Prova a remixare il Glitch e a provare alcune altre varianti.
Oltre al ritaglio, Le maschere CSS sono un modo per aggiungere interesse a immagini e altri elementi HTML senza dover utilizzare un'applicazione grafica.
Foto di Julio Rionaldo su Unsplash.