Share
In questo tutorial esamineremo un giocattolo CSS emergente che prende il nome di Backdrop Filter.
La proposta di filtro di sfondo è fortemente influenzata dal linguaggio di progettazione Apple, in particolare gelido-trasparente-sfocato-sfondo visto nelle loro interfacce iOS e macOS più recenti. Lo avrai notato nel Dock, nel menu contestuale e nel centro di notifica.
Il filtro di sfondo è attualmente cotto in Filtri CSS Livello 2 e, al momento della scrittura, funziona solo con Safari 9 con -webkit- prefisso e Chrome oltre a Opera abilitando le "Funzionalità della piattaforma Web sperimentale" sotto chrome: // flags menu.
Il filtro di sfondo è incluso come parte della specifica dei filtri CSS e quindi, in modo simile al filtro proprietà, eredita tutte le funzioni di filtro familiari tali in scala di grigi (), blur (), e seppia (). L'unica differenza qui è che influenzerà gli elementi al di sotto dell'elemento selezionato.
Per usarlo, avremo bisogno di almeno due elementi; il primo elemento sarà il bersaglio, mentre il secondo sarà al di sotto di esso. Per esempio:
Imposta uno sfondo nel primo elemento con bassa opacità in modo che possiamo aggiungere fondale filtro con una funzione, per esempio, in scala di grigi () per trasformare lo sfondo in bianco e nero.
.filter -webkit-backdrop-filter: blur (10px); / * Safari 9+ * / backdrop-filter: blur (10px); / * Chrome e Opera * / background-color: rgba (255, 255, 255, 0,3);
Si noti nella seguente demo che i discendenti di .filtro gli elementi (un pulsante in questo caso) rimangono nitidi nonostante il blur () aggiunta funzione. Questo è un vantaggio fondale filtro ha oltre il filtro proprietà; dove sono coinvolti tutti i discendenti.
Nota: immagine qui presa dal tutorial Come creare un Cappuccetto rosso Ispirato a un'illustrazione di favole nello strumento di pittura SAI.
Anche la combinazione di due funzioni di filtro in un'unica dichiarazione è accettabile. Ad esempio, mantenendo il nostro blur (), ma aggiungendo il in scala di grigi () funzione per rimuovere lo sfondo del colore.
.filter -webkit-backdrop-filter: grayscale () blur (10px); / * Safari 9+ * / backdrop-filter: grayscale () blur (10px); / * Chrome e Opera * / background-color: rgba (255, 255, 255, 0,3);
Altre funzioni che puoi aggiungere al mix includono:
Accentsconagua
luminosità(): accettare un numero da 0 a infinito o percentuale. Qualsiasi numero qui sotto 1, per esempio. 0.8, oscurerà l'elemento e specificherà qualsiasi numero sopra 1 schiarirà l'elemento.contrasto(): accetta un numero e una percentuale che funziona in modo simile a luminosità() funzione, tranne questa funzione definisce il contrasto dell'elemento.invertire(): questa funzione genera i colori opposti o negativi dello sfondo. Allo stesso modo, la funzione accetta anche un numero e una percentuale come valore.Se non riesci a trovare l'effetto desiderato da queste funzioni predefinite, puoi sempre aggiungere un filtro più avanzato tramite SVG. Crea un filtro SVG con un ID univoco e salvalo in un .svg file:
Fare riferimento al filtro con il url () funzione, così.
.filter -webkit-backdrop-filter: url (... /images/filter.svg#morph); / * Safari 9 * / backdrop-filter: url (... /images/filter.svg#morph); / * Chrome e Opera * /
Sfortunatamente, aggiungendo il filtro con url () la funzione non sembra funzionare in nessun browser al momento attuale. Ma una volta implementato correttamente, l'immagine dovrebbe apparire così.
Filtro personalizzato con SVG. Esistono numerose implementazioni pratiche sul web in cui è possibile applicare i filtri di sfondo in un modo più significativo rispetto al semplice contorno. Un buon esempio è Medio, che offusca la copertina dell'immagine post e le immagini all'interno del contenuto del post prima che l'immagine sia completamente caricata.
Immagine sfocata in Medium.comUn altro grande esempio del mondo reale è Facebook, che offusca le immagini con contenuti maturi, inappropriati o inquietanti, prima che gli utenti abbiano acconsentito a visualizzare l'immagine per intero.
Facebook che offusca un'immagine violenta seguendo le loro linee guida della Community Community di Facebook.Nel corso degli anni, i CSS sono stati migliorati con nuove specifiche che consentono ai progettisti di creare interfacce più interessanti sul web. Trasformazioni, transizioni e animazioni hanno fatto la loro parte, e ora anche i filtri di sfondo stanno arrivando.
Anche se è forse troppo presto per utilizzare il filtro di sfondo in produzione, queste demo dimostrano che saremo presto in grado di applicare effetti di filtro agli elementi in un modo più semplice e in definitiva meno dipendenti da pesanti librerie JavaScript o Canvas. Fino ad allora, segui il blog Webkit per gli aggiornamenti su questo e altri progetti.
