CSS mask-image
La proprietà CSS3 mask-image imposta una maschera visiva sull'elemento
La proprietà mask-image in CSS3 consente di applicare una maschera all'elemento, utilizzando immagini raster, SVG o gradienti CSS. Le parti nere della maschera mostrano l’elemento, mentre le bianche lo rendono trasparente. È utile per creare effetti visivi avanzati senza modificare direttamente l'immagine sorgente.
Sintassi
Significato dei valori principali:
-
none: Nessuna maschera viene applicata.
-
url(): Utilizza un'immagine esterna (es. SVG o PNG) come maschera.
-
gradient: Permette di creare maschere tramite gradienti CSS (es.
linear-gradient,radial-gradient). -
image-set(): Specifica più versioni della maschera per il supporto a schermi ad alta risoluzione.
Esempio proprietà: mask-image
Codice Esempio: mask-image
.mask-image-example {
width: 300px;
height: 300px;
background-color: #50a14f;
color: white;
font-size: 22px;
font-weight: bold;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, transparent 100%);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 100% 100%;
}
Contenuto Esempio: mask-image
Esempio di utilizzo di mask-image
In questo esempio, la proprietà mask-image viene usata per applicare una maschera a gradiente circolare all'elemento, rendendo trasparenti i bordi.
CSS e HTML per l'elemento con mask-image:
<style>
.mask-image-example {
width: 300px;
height: 300px;
background-color: #50a14f;
color: white;
font-size: 22px;
font-weight: bold;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, transparent 100%);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 60%, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 100% 100%;
}
</style>
<div class="mask-image-example">
Maschera con gradient
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
