Generatore di filtri CSS

Il generatore di filtri CSS è un editor visivo per la proprietà del filtro CSS. Si sposta un cursore per ogni funzione di filtro - sfocatura, luminosità, contrasto, saturazione, scala di grigi, seppia, inversione, rotazione della tonalità e opacità - e si guarda l'effetto applicare a un'anteprima in tempo reale, quindi si copia il CSS esatto che produce.

La proprietà Filter applica effetti grafici come sfocatura, spostamento del colore e regolazione del contrasto direttamente nel browser, senza bisogno di editor di immagini. Molteplici funzioni possono essere incatenate in un'unica dichiarazione e vengono applicate in ordine, ed è così che vengono costruiti gli look in stile fotografico come vintage, caldo e drammatico. Questo strumento gestisce quella catena per te e produce solo le funzioni che hai effettivamente modificato, mantenendo pulito il CSS.

Tutto accade nel tuo browser. Inizia da un preset come vintage o in scala di grigi, perfeziona ogni funzione e copia la dichiarazione. Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.

I filtri si applicano nell'ordine scritto e l'ordine cambia il risultato: scala di grigi quindi seppia non è uguale a seppia poi scala di grigi, perché il primo rimuove il colore che il secondo tingerebbe Il gotcha che vale la pena conoscere è strutturale piuttosto che visivo Qualsiasi elemento con un filtro diverso da nessuno diventa un blocco di contenimento per i suoi discendenti fissi e posizionati in modo assoluto, quindi un dropdown o un modale all'interno di un genitore filtrato si posizionerà contro quel genitore invece del viewport Crea anche un nuovo contesto di impilamento, che può rompere l'ordinamento z-index che funzionava prima Se un filtro rompe un layout in un modo che sembra estraneo all'aspetto, questo è quasi sempre il motivo. I filtri sono accelerati dalla GPU nella maggior parte dei browser, ma i raggi sfocati di grandi dimensioni su elementi rimangono costosi.