Sfocatura e variazione di colore dietro un elemento.
Storicamente, queste tecniche erano difficili da implementare sul web e richiedevano trucchetti o soluzioni alternative tutt'altro che perfetti. Negli ultimi anni sia Safari che Edge hanno fornito queste funzionalità tramite la proprietà background-filter (e, in alternativa, la proprietà -webkit-backdrop-filter), che unisce dinamicamente i colori di sfondo e di primo piano in base alle funzioni di filtro. Ora Chrome supporta background-filter, a partire dalla versione 76.
backdrop-filter. Prova l'esempio su CodePen.
Supporto del browser
Per migliorare le prestazioni, torna a un'immagine anziché a un polyfill quando backdrop-filter non è supportato. Questo è dimostrato nell'esempio seguente.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
Nozioni di base
- La proprietà
backdrop-filterapplica uno o più filtri a un elemento, modificando l'aspetto di qualsiasi elemento dietro l'elemento. - L'elemento di sovrapposizione deve essere almeno parzialmente trasparente.
- L'elemento in sovrapposizione avrà un nuovo contesto di sovrapposizione.
CSS backdrop-filter applica uno o più effetti a un elemento traslucido o trasparente. Per capire meglio, considera le immagini riportate di seguito.
.frosty-glass-pane {
backdrop-filter: blur(2px);
}
.frosty-glass-pane {
opacity: .9;
backdrop-filter: blur(2px);
}
L'immagine a sinistra mostra come verrebbe eseguito il rendering degli elementi sovrapposti se backdrop-filter non fosse utilizzato o supportato. L'immagine a destra applica un effetto di sfocatura utilizzando backdrop-filter. Tieni presente che utilizza opacity oltre a backdrop-filter. Senza opacity, non ci sarebbe nulla a cui applicare la sfocatura. È quasi ovvio che se opacity è impostato su 1 (completamente opaco) non ci sarà alcun effetto sullo sfondo.
La proprietà backdrop-filter è come i filtri CSS, in quanto sono supportate tutte le tue funzioni di filtro preferite: blur(), brightness(), contrast(), opacity(), drop-shadow() e così via. Supporta anche la funzione url() se vuoi utilizzare un'immagine esterna come filtro, nonché le parole chiave none, inherit, initial e unset. Tutto questo viene spiegato nell'MDN, comprese le descrizioni della sintassi, dei filtri e dei valori.
Se il criterio backdrop-filter è impostato su un valore diverso da none, il browser crea un nuovo contesto in pila. È anche possibile creare un blocco contenente, ma solo se l'elemento ha discendenti in posizione assoluta e fissa.
Puoi combinare filtri per ottenere effetti accattivanti e intelligenti oppure utilizzare un solo filtro per ottenere effetti più delicati o precisi. Puoi anche combinarli con i filtri SVG.
Esempi
Le tecniche e gli stili di progettazione precedentemente riservati ai sistemi operativi sono ora efficaci e realizzabili con una singola dichiarazione CSS. Vediamo qualche esempio.
Filtro singolo
Nell'esempio seguente, l'effetto satinato si ottiene combinando colore e sfocatura. La sfocatura è fornita da backdrop-filter, mentre il colore proviene dal colore di sfondo semitrasparente dell'elemento.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
Più filtri
A volte sono necessari più filtri per ottenere l'effetto desiderato. Per farlo, fornisci un elenco di filtri separati da uno spazio. Ad esempio:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
Nel seguente esempio, ciascuno dei quattro riquadri presenta una diversa combinazione di filtri di sfondo, mentre la stessa serie di forme è animata dietro di essi.
Sovrapposizioni
Questo esempio mostra come sfocare uno sfondo semitrasparente per rendere leggibile il testo fondendo in modo stilistico lo sfondo della pagina.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
Contrasto del testo su sfondi dinamici
Come indicato in precedenza, backdrop-filter consente effetti dalle prestazioni difficili o impossibili sul web. Un esempio è la modifica di uno sfondo in risposta a un'animazione. In questo esempio, backdrop-filter mantiene un contrasto elevato tra il testo e lo sfondo nonostante ciò che si trova dietro il testo. Inizia con il colore di sfondo predefinito darkslategray e utilizza backdrop-filter per invertire i colori dopo la trasformazione.
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}
Conclusione
Più di 560 di voi hanno dato un voto positivo al bug di Chromium negli ultimi anni, contrassegnando chiaramente questa funzionalità come una funzionalità CSS da tanto atteso. Con la release 76 di Chrome, backdrop-filter, il web fa un passo avanti rispetto a una presentazione UI simile a quella di un sistema operativo.