Il filtro CSS è una potente funzione che ci permette di aggiungere effetti grafici moderni e accattivanti ai nostri elementi HTML come sfocature, cambiamenti di luminosità, distorsioni, etc.
Per utilizzare il filtro in CSS, segui i seguenti passaggi:
1. Seleziona l’elemento HTML a cui vuoi applicare l’effetto. Puoi farlo inserendo il nome dell’elemento, la sua classe o il suo ID all’interno di una regola CSS. Ad esempio, se vuoi selezionare un’immagine con l’ID “my-image”, dovresti scrivere `#my-image` nel tuo foglio di stile CSS.
1. Utilizza la proprietà “filter” nel blocco delle regole CSS per l’elemento selezionato. Questa proprietà prende come valore il nome del filtro che desideri utilizzare seguito da parentesi. All’interno delle parentesi, puoi specificare le opzioni per il filtro.
Per esempio, se vuoi applicare un effetto di sfocatura di 5 pixel alla tua immagine, la tua regola CSS dovrebbe apparire così:
```
#my-image {
filter: blur(5px);
}
```
Ci sono molti filtri diversi che puoi utilizzare in CSS, ognuno con le sue opzioni. Alcuni di questi includono `blur()`, `brightness()`, `contrast()`, `grayscale()`, `invert()`, `opacity()`, `saturate()`, e `sepia()`. Puoi anche combinare più filtri insieme, separandoli con uno spazio.
Ecco un esempio di un’immagine con un filtro di sfocatura e un filtro di contrasto applicati:
```
#my-image {
filter: blur(5px) contrast(200%);
}
```
Ricorda che l’ordine in cui applichi i filtri può influire sul risultato finale.
