I filtri CSS sono uno strumento potente che gli autori possono utilizzare per ottenere diversi effetti visivi (un po 'come i filtri di Photoshop per il browser). La filterproprietà CSS fornisce l'accesso a effetti come sfocatura o spostamento del colore sul rendering di un elemento prima che l'elemento venga visualizzato. I filtri sono comunemente usati per regolare il rendering di un'immagine, uno sfondo o un bordo.
La sintassi è:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Esistono numerose funzioni da utilizzare per il valore:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- per applicare filtri SVGcustom()- "Prossimamente"
È possibile utilizzare più funzioni, separate da spazi.
.do-more-things ( filter: blur(20px) grayscale(20%); )Funzioni di filtro
Per utilizzare la proprietà del filtro CSS, specificare un valore per una delle seguenti funzioni elencate sopra. Se il valore non è valido, la funzione restituisce "nessuno". Tranne dove indicato, le funzioni che assumono un valore espresso con un segno di percentuale (come nel 34%) accettano anche il valore espresso come decimale (come in 0.34).
Ecco una demo che ti consente di giocare un po 'con i singoli filtri:
scala di grigi ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Converte l'immagine in ingresso in scala di grigi. Il valore di "importo" definisce la proporzione della conversione. Un valore del 100% è completamente in scala di grigi. Un valore dello 0% lascia l'ingresso invariato. I valori compresi tra 0% e 100% sono moltiplicatori lineari dell'effetto. Se manca il parametro "importo", viene utilizzato un valore del 100%. Non sono ammessi valori negativi.
seppia ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Converte l'immagine in ingresso in seppia. Il valore di "importo" definisce la proporzione della conversione. Un valore del 100% è completamente seppia. Un valore pari a 0 lascia l'ingresso invariato. I valori compresi tra 0% e 100% sono moltiplicatori lineari dell'effetto. Se manca il parametro "importo", viene utilizzato un valore del 100%. Non sono ammessi valori negativi.
saturare()
filter: saturate(2); /* same as… */ filter: sature(200%);Satura l'immagine in ingresso. Il valore di "importo" definisce la proporzione della conversione. Un valore dello 0% è completamente insaturo. Un valore del 100% lascia l'ingresso invariato. Altri valori sono moltiplicatori lineari sull'effetto. Sono consentiti valori superiori al 100%, fornendo risultati super saturi. Se manca il parametro "importo", viene utilizzato un valore del 100%. Non sono ammessi valori negativi.
hue-rotate ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Applica una rotazione della tonalità all'immagine in ingresso. Il valore di "angolo" definisce il numero di gradi attorno al cerchio di colore che verranno regolati i campioni di input. Un valore di 0deg lascia l'ingresso invariato. Se manca il parametro "angolo", 0degviene utilizzato un valore di . Il valore massimo è 360deg.
invertire()
filter: invert(100%);Inverte i campioni nell'immagine in ingresso. Il valore di "importo" definisce la proporzione della conversione. Un valore del 100% è completamente invertito. Un valore dello 0% lascia l'ingresso invariato. I valori compresi tra 0% e 100% sono moltiplicatori lineari dell'effetto. Se manca il parametro "importo", viene utilizzato un valore del 100%. Non sono ammessi valori negativi.
opacità()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Applica la trasparenza ai campioni nell'immagine di input. Il valore di "importo" definisce la proporzione della conversione. Un valore dello 0% è completamente trasparente. Un valore del 100% lascia l'ingresso invariato. I valori compresi tra 0% e 100% sono moltiplicatori lineari dell'effetto. Ciò equivale a moltiplicare i campioni dell'immagine in ingresso per quantità. Se manca il parametro "importo", viene utilizzato un valore del 100%. Questa funzione è simile alla proprietà di opacità più consolidata; la differenza è che con i filtri, alcuni browser forniscono l'accelerazione hardware per prestazioni migliori. Non sono ammessi valori negativi.
luminosità()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Applica un moltiplicatore lineare all'immagine in ingresso, facendola apparire più o meno luminosa. Un valore dello 0% creerà un'immagine completamente nera. Un valore del 100% lascia l'ingresso invariato. Altri valori sono moltiplicatori lineari sull'effetto. Sono consentiti valori superiori al 100%, fornendo risultati più brillanti. Se manca il parametro "importo", viene utilizzato un valore del 100%.
contrasto()
filter: contrast(4); /* same as… */ filter: contrast(400%);Regola il contrasto dell'ingresso. Un valore dello 0% creerà un'immagine completamente nera. Un valore del 100% lascia l'ingresso invariato. Sono consentiti valori superiori al 100%, fornendo risultati con meno contrasto. Se manca il parametro "importo", viene utilizzato un valore del 100%.
sfocatura ()
filter: blur(5px); filter: blur(1rem);Applica una sfocatura gaussiana all'immagine in ingresso. Il valore di "raggio" definisce il valore della deviazione standard della funzione gaussiana o quanti pixel sullo schermo si fondono l'uno con l'altro, quindi un valore maggiore creerà più sfocatura. Se non viene fornito alcun parametro, viene utilizzato un valore 0. Il parametro è specificato come lunghezza CSS, ma non accetta valori percentuali.
ombra esterna ()
filter: drop-shadow((2,3) ?)Applica un effetto ombra esterna all'immagine in ingresso. Un'ombra esterna è effettivamente una versione sfocata e sfalsata della maschera alfa dell'immagine in ingresso disegnata con un colore particolare, composta sotto l'immagine. La funzione accetta un parametro di tipo (definito in CSS3 Backgrounds), con l'eccezione che la parola chiave "inset" non è consentita.
Questa funzione è simile alla più consolidata proprietà box-shadow; la differenza è che con i filtri, alcuni browser forniscono l'accelerazione hardware per prestazioni migliori.
L'ombra esterna imita anche il contorno degli oggetti previsti in modo naturale, a differenza di box-shadowquello che considera solo la scatola come il suo percorso.
Proprio come con text-shadow, non esiste un parametro "spread" per creare un'ombra solida più grande dell'oggetto.
url ()
filter: url()La url()funzione prende la posizione di un file XML che specifica un filtro SVG e può includere un ancoraggio a un elemento di filtro specifico. Ecco un tutorial che funziona come una bella introduzione ai filtri SVG con una divertente demo.
Filtri animati
Poiché i filtri sono animabili, possono aprire le porte a un sacco di divertimento.
Appunti
È possibile combinare un numero qualsiasi di funzioni per manipolare il rendering, ma l'ordine è comunque importante (ovvero, l'uso di grayscale()after sepia()risulterà in un output completamente grigio).
Un valore calcolato diverso da "nessuno" risulta nella creazione di un contesto di impilamento allo stesso modo dell'opacità CSS. La proprietà del filtro non ha effetto sulla geometria del box model dell'elemento di destinazione, anche se i filtri possono causare la pittura al di fuori del riquadro del bordo di un elemento. Qualsiasi parte dell'elemento di destinazione è influenzata dalle funzioni di filtro. Ciò include qualsiasi contenuto, sfondo, bordi, decorazione del testo, contorno e meccanismo di scorrimento visibile dell'elemento a cui è applicato il filtro e quelli dei suoi discendenti. I filtri possono essere applicati anche al contenuto in linea, come le singole estensioni di testo.
La specifica introduce anche una filter(image-URL, filter-functions)funzione wrapper per un'immagine. Ti consentirebbe di filtrare qualsiasi immagine nel momento in cui la usi all'interno dei CSS. Ad esempio, puoi sfocare un'immagine di sfondo senza sfocare il testo. Questa funzione di filtro non è ancora supportata nei browser. Nel frattempo, puoi applicare sia lo sfondo che il filtro a uno pseudo-elemento per creare un effetto simile.
Il materiale del filtro proprietario di IE
Utilizzato anche la filterproprietà, come:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Utilizzato principalmente per l'opacità quando era necessario supportare IE 8 e versioni precedenti.
Maggiori informazioni
- Specifiche degli effetti del filtro W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galleria dei filtri di Bennett Feely
- Documenti MDN
- Posso usare
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Comprensione degli effetti del filtro CSS
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 18 * | 35 | No | 79 | 6 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 * | 6.0-6.1 * |