CSS isolation
La proprietà CSS3 isolation crea un nuovo contesto di impilamento
La proprietà isolation è utile quando si desidera impedire che gli effetti di fusione (blend) degli elementi interni influenzino quelli esterni o viceversa. Utilizzando isolation: isolate, si forza la creazione di uno stacking context indipendente, utile per una composizione grafica più controllata.
Sintassi
Significato dei valori principali:
-
auto: comportamento predefinito. L'elemento non crea un nuovo contesto di impilamento, a meno che non sia necessario per altre proprietà.
-
isolate: forza la creazione di un nuovo stacking context, isolando visivamente l’elemento dai blend effects degli elementi esterni.
Esempio proprietà: isolation
Codice Esempio: isolation
.isolation-wrapper {
display: flex;
gap: 20px;
background-color: #ffedb0; /* Sfondo giallo pastello */
padding: 20px;
}.blend-container {
position: relative;
width: 160px;
height: 160px;
padding: 10px;
border-radius: 8px;
border: 3px solid #555; /* Bordo visibile per delimitare */
}.blend-container.isolation-enabled {
isolation: isolate;
}.blend-box {
position: absolute;
width: 100px;
height: 100px;
top: 25px;
left: 25px;
mix-blend-mode: multiply;
border-radius: 8px;
}/* Colori chiari e trasparenti per fusione evidente */.light-pink {
background-color: rgba(255, 182, 193, 0.8); /* Rosa chiaro */
}.light-cyan {
background-color: rgba(173, 216, 230, 0.8); /* Azzurro chiaro */
}.blend-label {
position: absolute;
bottom: 5px;
left: 10px;
margin: 0;
font-size: 13px;
font-weight: bold;
color: #333;
}
Contenuto Esempio: isolation
Esempio di utilizzo di isolation
In questo esempio, due elementi si sovrappongono con effetto mix-blend-mode: multiply. Solo il contenitore con isolation: isolate mantiene i colori separati dal contesto esterno.
auto (default)
isolation: isolate
Risultato atteso:
Contenitore a sinistra: (auto, senza isolamento)
i due box si fondono tra loro e con lo sfondo giallo esterno.
=
→ quindi la zona sovrapposta diventa più scura e influenzata dallo sfondo giallo.
Contenitore a destra: (isolation: isolate)
i box si fondono solo tra loro, perché il contenitore è isolato.
=
→ quindi la zona sovrapposta diventa un colore coerente violaceo.
CSS e HTML per l'effetto con isolation:
<style>
.isolation-wrapper {
display: flex;
gap: 20px;
background-color: #ffedb0; /* Sfondo giallo pastello */
padding: 20px;
}
.blend-container {
position: relative;
width: 160px;
height: 160px;
padding: 10px;
border-radius: 8px;
border: 3px solid #555; /* Bordo visibile per delimitare */
}
.blend-container.isolation-enabled {
isolation: isolate;
}
.blend-box {
position: absolute;
width: 100px;
height: 100px;
top: 25px;
left: 25px;
mix-blend-mode: multiply;
border-radius: 8px;
}
/* Colori chiari e trasparenti per fusione evidente */
.light-pink {
background-color: rgba(255, 182, 193, 0.8); /* Rosa chiaro */
}
.light-cyan {
background-color: rgba(173, 216, 230, 0.8); /* Azzurro chiaro */
}
.blend-label {
position: absolute;
bottom: 5px;
left: 10px;
margin: 0;
font-size: 13px;
font-weight: bold;
color: #333;
}
</style>
<div class="isolation-wrapper">
<div class="blend-container">
<div class="blend-box light-pink"></div>
<div class="blend-box light-cyan"></div>
<p class="blend-label">auto (default)</p>
</div>
<div class="blend-container isolation-enabled">
<div class="blend-box light-pink"></div>
<div class="blend-box light-cyan"></div>
<p class="blend-label">isolation: isolate</p>
</div>
</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
