Il CSS filter la proprietà sembra una scorciatoia per lo styling: una riga trasforma una foto in bianco e nero, sfuma uno sfondo o riscalda una miniatura, senza alcun editor di immagini coinvolto È che Cambia anche il modo in cui il browser posiziona e stratifica l'elemento a cui è applicato, motivo per cui un filtro aggiunto per un effetto hover può rompere silenziosamente un dropdown a tre componenti di distanza.
Questa guida copre ciò che ogni funzione di filtro fa ai valori dei pixel, perché le stesse funzioni in un ordine diverso producono un'immagine diversa, come si comportano i filtri nel layout e nell'animazione e dove costano le prestazioni Utilizza il free Generatore di filtri CSS per costruire le dichiarazioni, ma ogni esempio è semplice CSS puoi incollare ovunque.
tl; dr: Il CSS
filterproprietà applica effetti grafici come sfocatura, luminosità, contrasto, scala di grigi, seppia, saturazione, inversione, tonalità-rotazione e opacità a un elemento e a tutto ciò che si trova al suo interno, nell'ordine in cui le funzioni sono scritte Qualsiasi valore diverso danonecrea anche un contesto di impilamento e diventa il blocco di contenimento per bambini fissi e assolutamente posizionati, che è la causa abituale di & quot; il mio modale è bloccato all'interno di un card" Il generatore di filtri CSS Toolz costruisce la dichiarazione con cursori e un'anteprima live, scrive solo le funzioni che hai cambiato ed esegue client-side, free, no signup.
Qual è la proprietà del filtro CSS?
La proprietà del filtro CSS applica effetti di elaborazione delle immagini a un elemento prima che venga disegnato sulla pagina L'effetto copre l'elemento's intero rendering: il suo sfondo, i bordi, il testo, le immagini e gli elementi figli È definito nel W3C Modulo Effetti filtro Livello 1 e supportato in tutti i browser attuali; IL Riferimento MDN per filtro elenca i dettagli di compatibilità.
Una dichiarazione è un elenco separato da spazi di funzioni di filtro:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
Le funzioni girano da sinistra a destra Ognuna prende come input l'output della precedente, che è la chiave per capire perché l'ordine conta.
I filtri non modificano il file immagine Il browser li applica ogni volta che dipinge, quindi l'originale rimane intatto e puoi modificare o rimuovere l'effetto con una riga di CSS.
Cosa fa ogni funzione di filtro?
Ogni funzione ha un valore di identità che lascia invariato l'elemento Il generatore Toolz usa quello per mantenere corto l'output: qualsiasi funzione lasciata al suo valore di identità viene omessa dal CSS.
| Funzione | Quello che fa | Identità | Gamma del cursore del generatore |
|---|---|---|---|
blur() |
Sfocatura gaussiana con il raggio dato | 0px |
da 0 a 20 px |
brightness() |
Moltiplica ogni canale di colore | 100% |
da 0 a 200% |
contrast() |
Spinge i canali lontano o verso il grigio medio | 100% |
da 0 a 200% |
saturate() |
Aumenta o diminuisce l'intensità del colore | 100% |
da 0 a 200% |
grayscale() |
Si fonde verso un grigio di uguale luminanza | 0% |
da 0 a 100% |
sepia() |
Si fonde con un tono marrone caldo | 0% |
da 0 a 100% |
invert() |
Capovolge ciascun canale verso il suo opposto | 0% |
da 0 a 100% |
hue-rotate() |
Ruota i colori attorno alla ruota dei colori | 0deg |
da 0 a 360 gradi |
opacity() |
Rende l'elemento più trasparente | 100% |
da 0 a 100% |
La specifica consente valori oltre alcuni di questi intervalli, come ad esempio brightness(300%). I cursori coprono gli intervalli utili per le regolazioni in stile foto; puoi digitare manualmente un valore più grande nel tuo CSS.
La spec definisce anche drop-shadow(), che il generatore non include Diversamente box-shadow, drop-shadow() segue la forma visibile delle immagini trasparenti come le icone PNG, piuttosto che la casella rettangolare element's. Per le ombre rettangolari, il guida ombra box copre la proprietà più flessibile.
Come cambiano i valori dei pixel i filtri colore?
La maggior parte dei filtri colore sono aritmetici semplici sui canali rosso, verde e blu, ciascuno trattato come un numero da 0 a 1. la specifica Effetti filtro definisce ciascuno come una formula o una matrice 3 per 3. lavorato su pochi colori, diventano prevedibili.
luminosità(150%) moltiplica ogni canale per 1,5. un grigio medio di rgb (100, 100, 100) diventa rgb (150, 150, 150) I valori che andrebbero oltre 255 vengono ritagliati, motivo per cui l'alta luminosità lava le luci al bianco puro.
contrasto(200%) applica (valore - 0,5) × 2 + 0,5 a ciascun canale Un grigio scuro a 0,25 (circa 64) diventa (0,25 - 0,5) × 2 + 0,5 = 0, nero Un grigio chiaro a 0,75 diventa 1,0, bianco Tutto si diffonde lontano dal centro.
scala di grigi(100%) sostituisce ogni pixel con un grigio in base alla luminanza, utilizzando pesi di 0,2126 per il rosso, 0,7152 per il verde e 0,0722 per il blu Il rosso puro, rgb (255, 0, 0), diventa 0,2126 × 255 = circa 54, quindi rgb (54, 54, 54) Il verde puro diventa un grigio molto più chiaro di circa 182 Ecco perché una conversione in scala di grigi mantiene la sensazione che il verde sia più luminoso del rosso.
seppia(100%) mescola canali con coefficienti ponderati a caldo Per l'uscita rossa la formula è 0,393R + 0,769G + 0,189B. Il bianco entra come (1, 1, 1) e esce come approssimativamente (1,35, 1,20, 0,94), che si aggancia a rgb (255, 255, 239): il bianco diventa una crema debole.
Queste cifre provengono dall'applicazione diretta delle formule specificazione's. Sullo schermo, l'arrotondamento e la gestione del colore possono spostare un risultato di una o due unità.
Perché l'ordine delle funzioni del filtro cambia il risultato?
I filtri vengono applicati in sequenza, quindi ogni funzione funziona sull'output precedente di function's. Quando una funzione rimuove informazioni, come la scala di grigi che rimuove il colore, tutto ciò che viene eseguito dopo di essa ha meno da lavorare.
Prendi il blu puro, rgb (0, 0, 255) e applica scala di grigi e seppia al 100% in entrambi gli ordini.
filter: grayscale(100%) sepia(100%);
- Prima la scala di grigi: il blu ha luminanza 0,0722, quindi il pixel diventa un grigio scuro di 0,0722 su ogni canale, circa rgb (18, 18, 18).
- Seppia secondo: il rosso diventa 0,0722 × (0,393 + 0,769 + 0,189) = 0,0975, il verde diventa 0,0722 × 1,203 = 0,0869, il blu diventa 0,0722 × 0,937 = 0,0677.
- Risultato: circa rgb(25, 22, 17), un marrone caldo molto scuro.
filter: sepia(100%) grayscale(100%);
- Prima la separazione: il rosso diventa 0,189, il verde 0,168, il blu 0,131, il marrone scuro.
- Scala di grigi secondo: la luminanza è 0,2126 × 0,189 + 0,7152 × 0,168 + 0,0722 × 0,131 = 0,170.
- Risultato: circa rgb(43, 43, 43), un grigio neutro senza alcuna tinta.
Stesse due funzioni, ordine diverso, e un risultato è tonico mentre l'altro no. La regola generale: metti le funzioni di rimozione del colore prima se vuoi che una funzione successiva tinga il risultato, e per ultima se vuoi un'immagine finale neutra.
Il generatore scrive sempre le funzioni in un ordine fisso: sfocatura, luminosità, contrasto, saturazione, scala di grigi, seppia, inversione, tonalità-rotazione, opacità Quindi la scala di grigi viene sempre prima del seppia, che dà la versione tonica Se hai bisogno di un ordine diverso, copia il CSS e riorganizza le funzioni a mano.
Cosa producono i preset?
Il generatore si apre sul preset Vintage Queste sono le esatte dichiarazioni che ogni preset scrive
| Scaldare | Css generati |
|---|---|
| nessuno | filter: none; |
| Grayscale | filter: grayscale(100%); |
| Vintage | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| Caldo | filter: brightness(105%) saturate(140%) sepia(25%); |
| Freddo | filter: saturate(120%) hue-rotate(200deg); |
| Drammatico | filter: brightness(90%) contrast(150%) saturate(120%); |
| Sbiadito | filter: brightness(110%) saturate(80%) opacity(80%); |
| Invertire | filter: invert(100%); |
| Sfocare | filter: blur(4px); |
I preset sono punti di partenza Fare clic su Caldo, quindi trascinare Blur su 2px e l'output diventa filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. Fare clic su Nessuno o Reimposta e ritorna a filter: none;.
Il preset Cool è più forte di quanto suggerisca il suo nome: una rotazione di tonalità di 200 gradi sposta le arance verso il blu e il blu verso l'arancione Si legge come & quot; cool" su foto calde e come un pesante cambiamento di colore su tutto il resto.
L'anteprima è un campione fisso di un gradiente blu, arancione e verde con poche forme, non un caricamento Mostra come ogni funzione muove colore, contrasto e sfocatura, ma prova sempre il CSS copiato sulla tua immagine reale, perché un filtro che lusinga un gradiente può sembrare fangoso su un tono di pelle.
Come si costruisce un filtro con il generatore?
- Apri il filtro Generatore CSS. Inizia con Vintage.
- Scegli un preset più vicino all'aspetto desiderato oppure fai clic su Nessuno per iniziare da nessun filtro.
- Trascina i cursori L'anteprima si aggiorna mentre ti muovi e la linea CSS Generata si aggiorna con essa.
- Fare clic su Copia CSS per mettere il pieno
filter: ...;dichiarazione sugli appunti. - Incollalo sul selettore per la tua immagine o elemento, quindi controllalo nella pagina reale.
Nell'output vengono visualizzate solo le funzioni modificate, quindi spostare nuovamente la luminosità esattamente al 100% rimuove brightness() dalla linea invece di partire brightness(100%) dietro.
Perché un filtro rompe elementi fissi e assolutamente posizionati?
Perché qualsiasi filter altro che none rende l'elemento un blocco contenente per i suoi discendenti posizionati in modo assoluto e fisso, e crea un nuovo contesto di stacking La specifica Effetti filtro afferma entrambi Questo non è un bug del browser; è come viene definita la proprietà.
In pratica, ciò produce due bug classici.
Un modale fisso che non è fisso. Normalmente position: fixed pone un elemento relativo alla viewport All'interno di un antenato filtrato viene invece collocato rispetto a quell'antenato:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
Un dropdown nascosto sotto i vicini. L'elemento filtrato diventa il proprio contesto di impilamento, quindi un bambino con z-index: 1000 non può più salire sopra gli elementi fuori dalla carta È solo in cima all'interno della carta.
Le correzioni sono le stesse per entrambe Applicare il filtro su un elemento più stretto, come il img all'interno della scheda anziché della scheda stessa Oppure renderizza il modale o il dropdown all'esterno dell'elemento filtrato, che è ciò che fanno & quot; portal" componenti nei framework dell'interfaccia utente. il transform la proprietà provoca lo stesso comportamento del blocco di contenimento, quindi il Guida alla trasformazione CSS è utile se si incontra questo bug con entrambe le proprietà in gioco.
Come si confrontano i filtri con il filtro di sfondo e l'opacità?
Diverse proprietà si sovrappongono alle funzioni del filtro e scegliere quella giusta evita gli effetti collaterali.
| Proprietà | Interessa | Uso tipico |
|---|---|---|
filter |
L'elemento e il suo contenuto | Effetti fotografici, loghi in scala di grigi, sfocatura su un'immagine |
backdrop-filter |
Qualunque cosa ci sia dietro l'elemento | Pannelli di vetro smerigliato, sovrapposizioni sfocate |
opacity |
L'elemento e il suo contenuto | Sbiadimento di un elemento dentro o fuori |
filter: opacity() |
L'elemento e il suo contenuto | Trasparenza come parte di una catena di filtri |
mix-blend-mode |
Come l'elemento si fonde con ciò che c'è dietro | Sovrapposizioni di colore, effetti duotone |
backdrop-filter assume le stesse funzioni di filter, ma li applica al contenuto dietro l'elemento, che è il modo in cui i pannelli di glassmorphism sfocano la pagina sottostante Il generatore glassmorphism costruisce quelle dichiarazioni.
Per sbiadire un elemento da solo, semplice opacity è la scelta più chiara. opacity() all'interno di una catena di filtri è utile quando si sta già scrivendo un filtro e si desidera trasparenza nella stessa riga.
Puoi animare i filtri CSS?
Sì. filter è animabile e un motivo comune è un logo in scala di grigi che diventa colorato al passaggio del mouse:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
Il browser interpola tra grayscale(100%) e none perché none viene trattato come le funzioni di corrispondenza ai loro valori di identità L'interpolazione funziona in modo pulito quando entrambi gli stati elencano le stesse funzioni nello stesso ordine Se gli elenchi di inizio e fine differiscono in ordine, il risultato può saltare invece di animare senza problemi, quindi scrivi entrambi gli stati con lo stesso ordine di funzione.
I filtri CSS danneggiano le prestazioni?
I filtri costano tempo di rendering e la sfocatura costa di più I browser eseguono comunemente filtri sulla GPU, il che rende la maggior parte dei filtri colore economici. blur() è diverso: il lavoro cresce sia con il raggio di sfocatura che con le dimensioni dell'area, quindi un ampio raggio su un elemento a schermo intero, specialmente uno che anima o si trova dietro il contenuto a scorrimento, può rilasciare fotogrammi su dispositivi più lenti.
Limiti pratici:
- Mantieni i raggi di sfocatura piccoli su elementi di grandi dimensioni ed evita di animare il raggio stesso.
- Sfoca un elemento più piccolo o un'immagine ridotta anziché un wrapper a pagina intera.
- Per il movimento, anima
transformeopacity, quali browser gestiscono in modo efficiente, e mantenere il filtro statico. - Prova su un telefono di fascia media, non solo su un desktop.
Domande comuni sugli effetti specifici
Alcuni effetti emergono abbastanza spesso da essere cancellati.
Immagine in bianco e nero: filter: grayscale(100%); Valori inferiori al 100% lasciano un po 'di colore, quindi grayscale(50%) dà un aspetto tenue.
Immagine di sfondo attenuata dietro il testo: filter: brightness(60%); sull'elemento immagine Controllare il contrasto del testo in seguito anziché indovinare; il controllore di contrasto colore fornisce un rapporto WCAG.
Modalità scura approssimativa per un documento o un diagramma incorporato: filter: invert(100%) hue-rotate(180deg); L'inversione capovolge la luce e il buio ma trasforma anche le tonalità nei loro opposti; ruotando la tonalità di 180 gradi si riporta la maggior parte dei colori verso la tonalità originale. È un'approssimazione e le foto all'interno sembreranno sbagliate, quindi escludile.
Tonato in bianco e nero: filter: grayscale(100%) sepia(60%); come spiegato sopra.
Il set completo di builder CSS, inclusi shadow e trasformate di testo, è sul Hub degli strumenti CSS.
Il generatore è privato?
Sì. L'anteprima e il CSS vengono generati nel browser con JavaScript. non viene caricato nulla, non c'è un'immagine da caricare in primo luogo e lo strumento continua a funzionare offline una volta caricata la pagina. La copia del CSS conta per un limite di utilizzo giornaliero e registra solo che è avvenuta una copia.
