Filtri

Podcast CSS - 023: Filtri .

Supponiamo di dover creare un elemento leggermente opaco, effetto vetro satinato sopra un'immagine. Il testo deve essere testo online e non un'immagine. E come potete farlo?

Una combinazione di filtri CSS e backdrop-filter che ci consentono di applicare effetti e sfocare in tempo reale ciò che serve. Sfocatura e opacità sono due dei tanti filtri disponibili: vediamo rapidamente cosa fanno tutti e come usarli.

La proprietà filter

Supporto dei browser

  • Chrome: 53.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 9.1.

Origine

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

In questo modo viene applicata una sfocatura gaussiana e l'unico argomento che puoi passare è radius, ovvero quanto sfoca viene applicata. Deve essere un'unità di lunghezza, ad esempio 10px. Le percentuali non sono accettate.

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

brightness

Supporto dei browser

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Origine

Per aumentare o diminuire la luminosità di un elemento: usa la funzione di luminosità. Il valore della luminosità è espresso in percentuale e l'immagine non modificata è espressa come valore del 100%. Un valore pari a 0% rende l'immagine completamente nera pertanto 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%);
}

contrast

Supporto dei browser

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Origine

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

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

grayscale

Supporto dei browser

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Origine

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

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

invert

Supporto dei browser

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Origine

Proprio come grayscale, puoi passare 1 o 0 alla funzione invert() per attivarla o disattivarla. Quando è attivo, i colori dell'elemento sono completamente invertiti. Puoi anche utilizzare valori percentuali o decimali per applicare solo un'inversione parziale dei colori. Se non passi argomenti alla funzione invert(), l'elemento sarà completamente invertito.

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

opacity

Supporto dei browser

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Origine

Il filtro opacity() funziona esattamente 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

Supporto dei browser

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Origine

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

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

sepia

Supporto dei browser

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Origine

Puoi aggiungere un effetto seppia con questo filtro che funziona come grayscale(). Il tono seppia è una tecnica di stampa fotografica che converte i toni neri in toni marroni per riscaldarli. Puoi passare un numero o una percentuale come argomento per sepia() che aumenta o diminuisce l'effetto. Se non viene inviato alcun argomento, si ottiene un effetto seppia completo (equivalente a sepia(100%)).

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

hue-rotate

Supporto dei browser

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Origine

Hai imparato in che modo la tonalità in hsl fa riferimento a una rotazione della ruota dei colori nella lezione sui colori e questo filtro funziona in modo simile. Se passi un angolo, ad esempio gradi o svolte, cambia la tonalità di tutti i colori dell'elemento, cambiando la parte della ruota dei colori a cui fa riferimento. Se non trasmetti nessun argomento, non succede niente.

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

drop-shadow

Supporto dei browser

  • Chrome: 18.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 6.

Origine

Puoi applicare un'ombra che abbraccia le curve come faresti in uno strumento di progettazione, come Photoshop con drop-shadow Questa ombra viene applicata a una maschera alfa, perciò è molto utile per aggiungere un'ombra a un'immagine di ritaglio. Il filtro drop-shadow utilizza un parametro ombra che contiene valori di 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

Supporto dei browser

  • Chrome: 5.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 6.

Origine

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

Filtro Sfondo

Supporto dei browser

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Origine

Il filtro sfondo accetta tutti gli stessi valori delle funzioni di filtro di filter. La differenza tra backdrop-filter e filter è che la proprietà backdrop-filter applica i filtri solo allo sfondo, in cui la proprietà filter la applica all'intero elemento.

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

Verifica le tue conoscenze

Verifica le tue conoscenze sui filtri

Quali delle seguenti sono funzioni di filtro CSS?

grayscale()
🎉
invert()
🎉
flip()
Riprova.
multiply()
Riprova.
blur()
🎉
brightness()
🎉

I CSS possono utilizzare i filtri SVG?

Sì
La funzione di filtro url() attiva questa azione
No
Riprova.