Lo sapevi che puoi applicare filtri alle immagini senza utilizzare un software grafico? Con i moderni browser possiamo usare filtri come Sfocatura, Saturazione, Contrasto, e tanti altri con poche righe di codice CSS gazie alla proprietà filter.
Prendiamo in esempio questa immagine e vediamo insieme tutti i filtri disponibili.
Indice
Sfocatura (blur)
Applica un effetto sfocatura all’immagine e accetta un valore in px. Maggiore è il valore e più sfocata apparirà l’immagine.
Esempio
img {
filter: blur(5px);
}
Luminosità (brightness)
Aggiusta la luminosità dell’immagine e accetta un valore in percentuale.
- Il valore 0 renderà l’immagine completamente nera
- I valori da 1 a 99 rendono l’immagine più scura
- Il valore 100 lascia l’immagine inalterata
- I valori superiori a 100 rendono l’immagine più luminosa
Esempi
img {
filter: brightness(50%);
}img {
filter: brightness(150%);
}Contrasto (contrast)
Aggiusta il contrasto dell’immagine e accetta un valore in percentuale.
- Il valore 0 renderà l’immagine completamente grigia
- I valori da 1 a 99 riducono il contrasto dell’immagine
- Il valore 100 lascia l’immagine inalterata
- I valori superiori a 100 aumentano il contrasto dell’immagine
Esempi
img {
filter: contrast(50%);
}img {
filter: contrast(150%);
}Ombra esterna (drop-shadow)
Questa funzione è molto simile alla proprietà box-shadow e il suo compito è quello di applicare un’ombra esterna all’immagine.
I valori da inserire sono 4:
offset x– la distanza orizzontale dell’ombra rispetto all’immagine (valore in px)offset Y– la distanza verticale dell’ombra rispetto all’immagine (valore in px)blur-radius– determina la sfocatura dell’ombra (valore in px)color– il colore dell’ombra (valore in HEX o RGBA)
Esempio
img {
filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5))
}Scala di grigi (grayscale)
Converte l’immagini in scala di grigi e accetta un valore in percentuale da 0 a 100.
Maggiore è il valore e più marcato sarà l’effetto. Il valore 0 lascia l’immagine inalterata.
Esempio
img {
filter: grayscale(100%)
}Rotazione dei toni (hue-rotate)
Permette di cambiare la tinta dell’immagine spostandoci sulla ruota dei colori. Il valore viene indicato in deg (gradi di rotazione).
Esempio
img {
filter: hue-rotate(260deg)
}Inversione colori (invert)
Permette di invertire i colori in modo tale che il bianco diventi nero, l’arancione diventi blu, il verde magenta, e così via.
Accetta un valore in percentuale da 0 a 100, dove 0 lascia l’immagine inalterata mentre 100 inverte completamente i colori.
Esempio
img {
filter: invert(100%)
}Opacità (opacity)
Permette di gestire la trasparenza dell’immagine. Il valore accettato è in percentuale e va da 0 a 100, dove 0 rende l’immagine completamente trasparente e 100 completamente visibile.
Esempio
img {
filter: opacity(50%)
}Saturazione (saturate)
Permette di gestire la saturazione dell’immagine. Il valore accettato è in percentuale.
- Il valore 0 renderà i colori dell’immagine completamente spenti
- I valori da 1 a 99 riducono la saturazione dell’immagine
- Il valore 100 lascia l’immagine inalterata
- I valori superiori a 100 aumentano la saturazione dell’immagine
Esempi
img {
filter: saturate(50%)
}img {
filter: saturate(150%)
}Seppia (sepia)
La funzione sepia ci permette di applicare l’effetto seppia che fa apparire l’immagine invecchiata grazie alla tonalità do marroni.
Il valore accettato è in percentuale e va da 0 a 100, dove 0 rende l’immagine inalterata e 100 completamente seppia.
Esempio
img {
filter: sepia(80%)
}Combinare più effetti
Qualora volessimo, potremmo anche combinare più effetti.
Esempio
img {
filter: saturate(50%) sepia(30%)
}Conclusioni
La proprietà filter ci tornerà utile in molti occasioni e ci permetterà di applicare effetti particolari alle immagini, ma non solo. Possiamo utilizzare le funzioni anche su altri elementi HTML come div, p, h1, e così via.
Se vuoi sapere quali sono i browser compatibili e vuoi approfondire l’argomento ti invito a dare un’occhiata alla documentazione ufficiale di Mozilla.
Lascia un commento