Crea sfondi in stile sistema operativo con il filtro dello sfondo

Sfocatura e variazione di colore dietro un elemento.

Adam Argyle

Joe Medley

In passato, queste tecniche erano difficili da implementare sul web e richiedevano hack o soluzioni alternative non perfette. 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.

Supporto browser

Per migliorare le prestazioni, utilizza un'immagine anziché 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-filter applica uno o più filtri a un elemento, modificando l'aspetto di qualsiasi elemento dietro l'elemento.
• L'elemento in sovrapposizione deve essere almeno parzialmente trasparente.
• L'elemento sovrapposto riceverà un nuovo contesto di impilamento.

CSS backdrop-filter applica uno o più effetti a un elemento traslucido o trasparente. Per comprendere questo concetto, guarda le immagini di seguito.

Nessuna trasparenza in primo piano

.frosty-glass-pane {
  backdrop-filter: blur(2px);
}

Trasparenza in primo piano

.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

L'immagine a sinistra mostra come verrebbero visualizzati gli 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. Puoi trovare spiegazioni su tutto questo su MDN, incluse descrizioni di sintassi, filtri e 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 persino 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 alcuni esempi.

Filtro singolo

Nell'esempio seguente, l'effetto satinato viene ottenuto combinando il colore e la 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. A tale scopo, 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);
}

Nell'esempio seguente, ciascuno dei quattro riquadri ha una combinazione diversa di filtri sfondo, mentre lo stesso insieme di forme è animato dietro.

Sovrapposizioni

Questo esempio mostra come sfocare uno sfondo semitrasparente per rendere il testo leggibile e allo stesso tempo fondersi stilisticamente con lo sfondo di una 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

Negli ultimi anni più di 560 di voi hanno votato positivamente il bug di Chromium, indicando chiaramente che si tratta di una funzionalità CSS molto attesa. Il rilascio di backdrop-filter nella versione 76 di Chrome avvicina il web a una presentazione dell'interfaccia utente davvero simile a quella di un sistema operativo.

Risorse aggiuntive

• Specifiche
• Stato della piattaforma Chrome
• MDN
• background-filter su CSS Tricks
• Esempi sul codepen