CSS mask-composite
La proprietà CSS3 mask-composite definisce come combinare più maschere
La proprietà mask-composite in CSS3 permette di controllare come vengono combinate più maschere applicate a un singolo elemento. È utile in contesti complessi in cui si desidera sovrapporre, escludere o fondere più maschere. È supportata principalmente in ambienti WebKit e richiede spesso prefissi per la compatibilità.
Sintassi
mask-composite: add | subtract | intersect | exclude;
Significato dei valori principali:
- add: Combina le maschere sommando le aree opache (default in WebKit).
- subtract: Sottrae la maschera successiva da quella precedente.
- intersect: Mostra solo le aree comuni tra le maschere.
- exclude: Mostra le aree che non si sovrappongono tra le maschere.
Esempio proprietà: mask-composite
Codice Esempio: mask-composite
CODE: CSS
.mask-composite-example {
width: 300px;
height: 300px;
background-color: #ff6347;
color: white;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 10px;
mask-image: radial-gradient(circle at 30% 50%, black 50%, transparent 100%),
radial-gradient(circle at 70% 50%, black 50%, transparent 100%);
mask-composite: exclude;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
-webkit-mask-image: radial-gradient(circle at 30% 50%, black 50%, transparent 100%),
radial-gradient(circle at 70% 50%, black 50%, transparent 100%);
-webkit-mask-composite: destination-out;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 100% 100%;
}
Contenuto Esempio: mask-composite
Esempio di utilizzo di mask-composite
In questo esempio, due maschere circolari vengono combinate con mask-composite: exclude, mostrando solo le parti non sovrapposte.
Maschere combinate con
exclude
CSS e HTML per l'elemento con mask-composite:
<style>
.mask-composite-example {
width: 300px;
height: 300px;
background-color: #ff6347;
color: white;
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 10px;
mask-image: radial-gradient(circle at 30% 50%, black 50%, transparent 100%),
radial-gradient(circle at 70% 50%, black 50%, transparent 100%);
mask-composite: exclude;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 100% 100%;
-webkit-mask-image: radial-gradient(circle at 30% 50%, black 50%, transparent 100%),
radial-gradient(circle at 70% 50%, black 50%, transparent 100%);
-webkit-mask-composite: destination-out;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 100% 100%;
}
</style>
<div class="mask-composite-example">
Maschere combinate con <code>exclude</code>
</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
