Blog

May 11, 2023

Come utilizzare i filtri CSS e le modalità di fusione per creare effetti visivi

The CSS filter and blend modes are powerful tools to easily apply stunning

Il filtro CSS e le modalità di fusione sono strumenti potenti per applicare facilmente effetti visivi sorprendenti alla tua pagina web senza la necessità di codice complesso.

Il filtro CSS e le modalità di fusione ti consentono di applicare facilmente effetti visivi alla tua pagina web. I filtri sono un insieme di funzioni CSS predefinite utilizzate per regolare il rendering di immagini o altri elementi HTML. Mentre le modalità di fusione determinano come un elemento dovrebbe fondersi con il suo sfondo o con gli elementi vicini.

Puoi applicare i filtri CSS utilizzando il filefiltro proprietà e una proprietà che specifica il tipo di effetto applicato. Ogni proprietà del filtro è una funzione CSS, che funziona in modo simile a una funzione variabile CSS. Accetta un parametro per specificare quanto il filtro dovrebbe influenzare l'elemento con stile.

Sono disponibili 10 funzioni di filtro CSS per definire lo stile del tuo elemento HTML:

Puoi utilizzare questi filtri singolarmente o in combinazione per creare stili unici e migliorare l'aspetto dei tuoi elementi HTML.

Alcuni di questi filtri funzionano molto meglio con altri se usati nel modo giusto.

Ecco alcuni esempi di combinazione di filtri CSS per ottenere diversi effetti visivi su un elemento dell'immagine.

ILscala di grigi() il filtro rimuove tutte le informazioni sul colore da un'immagine o da un elemento di testo. Il filtro assume un valore compreso tra 0 e 1, dove 0 indica il colore originale e 1 l'effetto completo della scala di grigi.

ILseppia() Il filtro applica un effetto seppia a un'immagine o a un elemento di testo. Anche il filtro assume un valore compreso tra 0 e 1.

Per esempio:

Combinandoscala di grigi()al 14% eseppia()al 30% può creare un effetto vintage o retrò sulla tua immagine.

ILsaturare() il filtro aumenta o diminuisce la saturazione di un'immagine o di un elemento di testo. Il filtro assume un valore compreso tra 0 e infinito, dove 1 è il colore originale e valori più alti aumentano la saturazione.

ILinvertire() Il filtro invertirà i colori di un'immagine o di un elemento di testo capovolgendo la tonalità di ogni colore presente di 180 gradi sulla ruota dei colori. Ciò significa che il filtro modifica i livelli di luminosità e saturazione dell'elemento mantenendo la tonalità.

Per esempio:

Questo codice inverte i colori dell'immagine e aumenta la saturazione del 75%.

ILrotazione tonalità() Il filtro ruota le tonalità di un'immagine o di un elemento di testo, il che significa che cambia il colore generale dell'elemento mantenendo i livelli di luminosità e saturazione. La quantità di rotazione può essere specificata in gradi, dove 0 rappresenta il colore originale e 360 ​​rappresenta una rotazione completa fino al colore originale.

Combinando ilrotazione tonalità()Econtrasto()i filtri possono creare un effetto vibrante e colorato sulle tue immagini.

Per esempio:

La rotazione della tonalità può accettare un valore digrado,grado,rad, Ogiro . Il codice sopra ruota la tonalità dell'immagine di 10 gradi e aumenta il contrasto.

I filtri di luminosità e sfocatura sono molto autoesplicativi. Il primo regola la luminosità dell'immagine e il secondo controlla il livello di sfocatura applicato.

Combinando illuminosità()Esfocatura()i filtri possono creare un effetto sognante e morbido sulle tue immagini.

Per esempio:

Il codice sopra diminuisce la luminosità di0,8 (80%)e applica a5pxeffetto sfocato sull'immagine.

Un effetto ombra esterna è un effetto visivo in cui un elemento sembra proiettare un'ombra sulla superficie dietro di esso, dando l'illusione di profondità e dimensionalità. Le ombre esterne vengono spesso applicate al testo o alle immagini per creare un senso di separazione tra l'elemento e lo sfondo.

Nel frattempo, il filtro dell'opacità controlla la trasparenza di un elemento.

Combinando ilombra esterna()Eopacità()i filtri possono creare un effetto sottile sugli elementi di testo.