Il podcast CSS - 023: Filtri
Supponiamo che tu debba creare un elemento con un effetto vetro leggermente opaco e smerigliato sopra l'immagine. Il testo deve essere testo online e non un'immagine. E come potete farlo?
Una combinazione di filtri CSS e backdrop-filter ci consente di applicare effetti e sfocature in tempo reale.
Sfocatura e opacità sono due dei tanti filtri disponibili,
quindi vediamo cosa fanno tutti e come utilizzarli.
La proprietà filter
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 trasmettere è un radius,
che è
la quantità di sfocatura applicata.
Deve essere un'unità di lunghezza, ad esempio 10px. Le percentuali non sono accettate.
.my-element {
filter: blur(0.2em);
}
brightness
Per aumentare o diminuire la luminosità di un elemento, usa la funzione 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. Di conseguenza, 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
Imposta un valore compreso tra 0% e 100% per diminuire o aumentare il contrasto, rispettivamente.
.my-element {
filter: contrast(160%);
}
grayscale
Puoi applicare un effetto completamente in scala di grigi utilizzando 1 come valore per grayscale()
o 0 per ottenere 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
Proprio come grayscale,
puoi passare 1 o 0 alla funzione invert() per attivarla o disattivarla.
Quando è attiva, 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 verrà completamente invertito.
.my-element {
filter: invert(1);
}
opacity
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
Il filtro di saturazione è molto simile al filtro brightness e accetta lo stesso argomento: numero o percentuale.
Invece di aumentare o diminuire l'effetto di luminosità, saturate aumenta o diminuisce la saturazione del colore.
.my-element {
filter: saturate(155%);
}
sepia
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(),
aumentando o diminuendo 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
Hai scoperto 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 giri,
la tonalità di tutti i colori dell'elemento viene modificata,
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
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
Il filtro url ti consente di applicare un filtro SVG da un elemento o file SVG collegato.
Puoi scoprire di più sui filtri SVG qui
Filtro Sfondo
La proprietà backdrop-filter
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,
mentre la proprietà filter li 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()multiply()blur()brightness()I CSS possono utilizzare i filtri SVG?
url() attiva questa azione