Crea sfondi in stile sistema operativo con il filtro dello sfondo

Sfocatura e colore che si sposta dietro un elemento.

Traslucenza, sfocatura e altri effetti sono strumenti utili per creare profondità senza rinunciare al contesto dei contenuti di sfondo. Supportano numerosi casi d'uso, come il vetro smerigliato, gli overlay video, le intestazioni di navigazione traslucide, la censura inappropriata delle immagini, il caricamento delle immagini e così via. Potresti riconoscere questi effetti dovuti a due sistemi operativi molto diffusi: Windows 10 e iOS.

Storicamente, 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, -webkit-backdrop-filter), che unisce dinamicamente i colori di primo piano e di sfondo in base alle funzioni di filtro. Ora Chrome supporta background-filter, a partire dalla versione 76.

Supporto del browser

Per motivi legati alle prestazioni, utilizza un'immagine anziché un polyfill quando backdrop-filter non è supportato. Ciò è illustrato nell'esempio riportato di seguito.

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

Dettagli 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 sovrapposto 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 comprendere meglio questo concetto, considera le immagini di seguito.

L'immagine a sinistra mostra come gli elementi sovrapposti verrebbero visualizzati se backdrop-filter non venisse utilizzato o supportato. L'immagine a destra applica un effetto di sfocatura utilizzando backdrop-filter. Nota che utilizza opacity oltre a backdrop-filter. Senza opacity, non ci sarebbe nulla a cui applicare la sfocatura. È quasi inutile dire che se opacity è impostato su 1 (completamente opaco) non ci sarà alcun effetto sullo sfondo.

La proprietà backdrop-filter è simile ai filtri CSS, in quanto sono supportate tutte le tue funzioni di filtro preferite: blur(), brightness(), contrast(), opacity(), drop-shadow() e così via. Supporta inoltre la funzione url() se vuoi utilizzare un'immagine esterna come filtro, oltre alle parole chiave none, inherit, initial e unset. Ci sono spiegazioni per tutto questo su MDN, comprese 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 di stack. È anche possibile creare un blocco contenitore, ma solo se l'elemento presenta discendenti di posizione assoluti e fissa.

Puoi combinare i filtri per ottenere effetti ricchi e intelligenti o utilizzare un solo filtro per ottenere effetti più delicati o precisi. Puoi anche combinarli con i filtri SVG.

Esempi

Tecniche e stili di progettazione precedentemente riservati ai sistemi operativi ora sono performanti e raggiungibili con una singola dichiarazione CSS. Vediamo alcuni esempi.

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. A questo 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 diversa combinazione di filtri di sfondo, mentre lo stesso insieme di forme viene animato dietro.

Sovrapposizioni

Questo esempio mostra come sfocare uno sfondo semitrasparente per rendere leggibile il testo e armonizzarlo stilisticamente con lo sfondo di una pagina.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

Contrasto del testo sugli sfondi dinamici

Come indicato in precedenza, backdrop-filter consente di ottenere effetti con prestazioni elevate che sarebbero difficili o impossibili sul web. Un esempio è la modifica dello sfondo in risposta a un'animazione. In questo esempio, backdrop-filter mantiene l'elevato contrasto tra il testo e lo sfondo, nonostante ciò che accade dietro il testo. Viene utilizzato il colore di sfondo predefinito darkslategray e 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 utenti hanno dato un voto positivo al bug di Chromium, contrassegnando chiaramente questa funzionalità come una funzionalità CSS da molto attesa. La versione 76 di Chrome di backdrop-filter avvicina il web a una presentazione dell'interfaccia utente simile a un sistema operativo.

Risorse aggiuntive

• Specifiche
• Stato della piattaforma Chrome
• Numero di cellulare
• background-filter in CSS Tricks
• Esempi su codepen