CSS filter: Blur, Luminosità, Contrasto e altro
Padroneggia la proprietà CSS filter — blur, brightness, contrast, grayscale, hue-rotate e drop-shadow.
La proprieta CSS filter applica effetti grafici agli elementi. A differenza dell'editing delle immagini in Photoshop, i filtri CSS sono in tempo reale e non distruttivi.
I filtri vengono applicati come un elenco di funzioni. L'ordine conta: ogni filtro viene applicato al risultato del precedente.
Cos'e' CSS filter
La proprieta CSS filter accetta un elenco di funzioni di filtro separate da spazi. I filtri si applicano all'elemento e a tutti i suoi contenuti inclusi i figli.
Tool gratuito Generatore Filtri CSS Crea effetti filtro CSS con anteprima liveblur() e brightness()
blur(raggio) applica una sfocatura gaussiana. brightness(quantita) regola la luminosita: brightness(1) invariato, brightness(0) e nero, brightness(2) e il doppio della luminosita.
contrast(), grayscale(), sepia()
contrast(quantita) regola il contrasto. grayscale(quantita) rimuove il colore: grayscale(1) e completamente in scala di grigi. sepia(quantita) applica un tono marrone caldo.
Tool gratuito Simulatore Daltonismo Visualizza come appaiono i tuoi design agli utenti con deficienze visivehue-rotate() e saturate()
hue-rotate(angolo) ruota la tinta di tutti i colori. saturate(quantita) regola l'intensita del colore: saturate(0) e scala di grigi, saturate(2) e altamente saturato.
drop-shadow() vs box-shadow
drop-shadow() crea un'ombra che segue la forma dell'elemento, incluse le aree trasparenti nelle immagini. box-shadow segue solo il rettangolo di delimitazione dell'elemento.
Combinare piu filtri
Piu filtri vengono applicati da sinistra a destra. filter: brightness(1.2) contrast(1.1) saturate(1.3) crea un'immagine vivace.
Tool gratuito Generatore Glassmorphism Crea effetti vetro smerigliato con backdrop-filter e blur