Podcast CSS - 023: filtri
Supponiamo che tu debba creare un elemento con un effetto vetro satinato leggermente opaco da posizionare sopra un'immagine. Il testo deve essere testo in tempo reale e non un'immagine. E come potete farlo?
Una combinazione di filtri CSS e backdrop-filter
consente di applicare effetti e sfocare ciò che serve in tempo reale.
Sfocatura e opacità sono due dei tanti filtri disponibili.
Diamo una rapida occhiata a ciò che fanno tutti e come usarli.
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 passare è un radius, ovvero quanto sfocatura viene 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 di luminosità è espresso in percentuale, mentre l'immagine non modificata è espressa come valore di 100%. Un valore pari allo 0% rende l'immagine completamente nera, quindi 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 aumentare o diminuire il contrasto, rispettivamente.
.my-element {
filter: contrast(160%);
}
grayscale
Puoi applicare un effetto completamente in scala di grigi utilizzando 1 come valore per grayscale() oppure 0 per avere un elemento completamente saturato.
Puoi anche utilizzare valori percentuali o decimali per applicare solo un effetto scala di grigi parziale.
Se non passi argomenti, l'elemento sarà completamente in scala di grigi.
Se passi un valore superiore a 100%, il limite sarà 100%.
.my-element {
filter: grayscale(80%);
}
invert
Come grayscale,
puoi trasmettere 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 argomenti nella funzione invert(), l'elemento verrà completamente invertito.
.my-element {
filter: invert(1);
}
opacity
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 nessun argomento, 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 di sepia(),
che aumenta o diminuisce l'effetto.
Se non vengono superati argomenti, viene aggiunto un effetto seppia completo (equivalente a sepia(100%)).
.my-element {
filter: sepia(70%);
}
hue-rotate
Hai scoperto come la tonalità in hsl fa riferimento a una rotazione della ruota dei colori nella
lezione Colori e questo filtro funziona in modo simile.
Se passi un angolo, ad esempio gradi o svolte,
la tonalità di tutti i colori dell'elemento viene modificata e la parte della ruota dei colori a cui fa riferimento. Se non passi alcuna argomentazione, non fa nulla.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Puoi applicare un'ombra che abbraccia una curva come faresti in uno strumento di progettazione,
come Photoshop con drop-shadow.
Questa ombra viene applicata a una maschera alfa, il che rende molto utile l'aggiunta di un'ombra a un'immagine ritagliata.
Il filtro drop-shadow utilizza un parametro di 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 distribuito non sono supportati.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Scopri di più sui diversi tipi di ombre nel modulo shadows.
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 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 riportato all'inizio di questa lezione è l'esempio perfetto, perché il testo non deve essere sfocato e idealmente non deve essere necessario aggiungere altri elementi HTML. Per farlo, puoi applicare filtri solo allo sfondo.
Verifica le tue conoscenze
Verifica le tue conoscenze dei filtri
Quali delle seguenti sono funzioni di filtro CSS?
grayscale()invert()flip()multiply()blur()brightness()Il CSS può utilizzare i filtri SVG?
url() consente di eseguire questa operazione