Filtri

The CSS Podcast - 023: Filters

Supponiamo che tu debba creare un elemento con un effetto vetro smerigliato leggermente opaco posizionato sopra la parte superiore di un'immagine. Il testo deve essere dinamico e non un'immagine. E come potete farlo?

Una combinazione di filtri CSS e backdrop-filter ci consente di applicare effetti e sfocare ciò che è necessario in tempo reale. Sfocatura e opacità sono due dei molti filtri disponibili, quindi diamo un'occhiata veloce a cosa fanno e come utilizzarli.

Nota: quando inserisci il testo sulle immagini, assicurati che sia ancora leggibile nel caso in cui l'effetto filtro non sia supportato nel browser di un utente.

La proprietà filter

Browser Support

• 53
• 12
• 35
• 9.1

Source

Puoi applicare uno o più dei seguenti filtri come valore per filter. Se applichi un filtro in modo errato, gli altri filtri definiti per filter non funzioneranno.

blur

Viene applicata una sfocatura gaussiana e l'unico argomento che puoi passare è un radius, che rappresenta l'entità della sfocatura applicata. Deve essere un'unità di misura della lunghezza, ad esempio 10px. Le percentuali non sono accettate.

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

Per aumentare o diminuire la luminosità di un elemento, utilizza la funzione di luminosità. Il valore di luminosità è espresso in percentuale, con l'immagine invariata espressa come valore del 100%. Un valore pari a 0% rende l'immagine completamente nera, pertanto i valori compresi tra 0% e 100% rendono l'immagine meno luminosa. Utilizza valori superiori al 100% per aumentare la luminosità.

.my-element {
    filter: brightness(80%);
}

Nota: in filtri come brightness puoi utilizzare anche valori decimali anziché percentuali. Per impostare la luminosità all'80% con un numero decimale, scrivi 0.8.

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

Imposta un valore compreso tra 0% e 100% per diminuire o aumentare il contrasto.

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

Puoi applicare un effetto completamente in scala di grigi utilizzando 1 come valore per grayscale() o 0 per avere un elemento completamente saturo. Puoi anche utilizzare valori percentuali o decimali per applicare solo un effetto in scala di grigi parziale. Se non passi argomenti, l'elemento sarà completamente in scala di grigi. Se specifichi un valore superiore al 100%, verrà applicato un limite massimo del 100%.

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

• 18
• 12
• 35
• 6

Source

Come per grayscale, puoi passare 1 o 0 alla funzione invert() per attivarla o disattivarla. Quando è attiva, i colori dell'elemento vengono completamente invertiti. Puoi anche utilizzare valori percentuali o decimali per applicare solo un'inversione parziale dei colori. Se non passi alcun argomento alla funzione invert(), l'elemento verrà completamente invertito.

.my-element {
    filter: invert(1);
}

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

Il filtro opacity() funziona come la proprietà opacity, in cui puoi passare un numero o una percentuale per aumentare o ridurre l'opacità. Se non passi argomenti, l'elemento è completamente visibile.

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

• 18
• 12
• 35
• 6

Source

Il filtro di saturazione è molto simile al filtro brightness e accetta lo stesso argomento: numero o percentuale. Anziché aumentare o diminuire l'effetto di luminosità, saturate aumenta o diminuisce la saturazione del colore.

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

Con questo filtro puoi aggiungere un'effetto seppia che funziona come grayscale(). La tonalità seppia è una tecnica di stampa fotografica che converte i toni neri in toni marroni per scaldarli. Puoi passare un numero o una percentuale come argomento per sepia() che aumenta o diminuisce l'effetto. Se non specifichi alcun argomento, viene aggiunto un effetto seppia completo (equivalente a sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

Nella lezione sui colori hai appreso che la tonalità in hsl fa riferimento a una rotazione della ruota dei colori e questo filtro funziona in modo simile. Se passi un angolo, ad esempio gradi o giri, si sposta la tonalità di tutti i colori dell'elemento, modificando la parte della ruota dei colori a cui fa riferimento. Se non passi alcun argomento, non viene eseguita alcuna operazione.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

Puoi applicare un'ombra interna che segue le curve come faresti in uno strumento di progettazione, come Photoshop con drop-shadow. Questa ombra viene applicata a una maschera alfa, il che la rende molto utile per aggiungere un'ombra a un'immagine ritagliata. Il filtro drop-shadow accetta un parametro ombra che contiene valori offset-x, offset-y, sfocatura e colore separati da spazi. È quasi identico a box-shadow, ma la parola chiave inset e il valore di spread non sono supportati.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Scopri di più sui diversi tipi di ombre nel modulo ombre.

url

Browser Support

• 5
• 12
• 3
• 6

Source

Il filtro url consente di applicare un filtro SVG da un elemento o un file SVG collegato. Puoi scoprire di più sui filtri SVG qui

Filtro sfondo

Browser Support

• 76
• 79
• 103
• 18

Source

La proprietà backdrop-filter accetta tutti gli stessi valori della funzione di filtro di filter. La differenza tra backdrop-filter e filter è che la proprietà backdrop-filter applica i filtri solo allo sfondo, mentre la proprietà filter li applica all'intero elemento.

L'esempio all'inizio di questa lezione è perfetto, perché non vuoi che il testo sia sfocato e, idealmente, non vuoi dover aggiungere elementi HTML aggiuntivi. La possibilità di applicare filtri solo allo sfondo lo consente.

Verificare di aver compreso

Verifica le tue conoscenze sui filtri

Quali delle seguenti sono funzioni di filtro CSS?

grayscale()

🎉

invert()

🎉

flip()

Riprova.

multiply()

Riprova.

blur()

🎉

brightness()

🎉

CSS può utilizzare i filtri SVG?

Sì

La funzione di filtro url() consente di farlo

No

Riprova.