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à filtro applica effetti grafici come sfocatura, spostamento del colore e regolazione del contrasto direttamente nel browser, senza che sia richiesto alcun editor di immagini. È possibile concatenare più funzioni in un'unica dichiarazione e applicarle in ordine, ovvero come vengono costruiti aspetti in stile fotografico come vintage, caldo e drammatico. Questo strumento gestisce quella catena per te e restituisce solo le funzioni che hai modificato, mantenendo pulito il CSS.

Tutto accade nel tuo browser La pagina si apre sul preset Vintage; scegli un altro preset, perfeziona ogni funzione e copia la dichiarazione Nessun account, nessun caricamento e continua a funzionare offline una volta caricata la pagina.

Ecco il generatore di filtri CSS su un look fotografico caldo Clicca sul filtro Preimpostazione calda e letture CSS generate: luminosità (105%) saturata (140%) seppia (25%); con l'anteprima che si sposta verso l'ambra Trascina Blur su 2px e la linea diventa filtro: sfoca (2px) luminosità (105%) satura (140%) seppia (25%); Fai clic su Nessuno, oppure premi Reset, e ritorna al filtro: nessuno; Poiché l'anteprima è un campione a colori fisso anziché la tua foto, controlla il CSS copiato sull'immagine reale prima di spedirlo.

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 contenente 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ò interrompere l'ordinamento z-index che funzionava prima Se un filtro rompe un layout in un modo che sembra estraneo all'aspetto, è quasi sempre il motivo per cui I filtri sono accelerati dalla GPU nella maggior parte dei browser, ma i raggi di sfocatura grandi elementi rimangono costosi Questo strumento scrive sempre le funzioni in un ordine fisso, sfocatura prima e opacità per ultima, quindi non può produrre sepia prima della scala di grigi; riordina le funzioni manualmente dopo aver copiato se ne hai bisogno.