Share
Considera una situazione in cui devi avere versioni ad alto contrasto, sfocate o più luminose di immagini particolari sul tuo sito web. Prima dei filtri CSS, le tue uniche opzioni erano di caricare diverse versioni di queste immagini o manipolare le immagini con JavaScript.
A meno che tu non voglia manipolare i pixel nell'immagine originale, i filtri CSS forniscono una facile via d'uscita. Iniziamo questo tutorial con una breve discussione di tutti i filtri disponibili.
Questo filtro applicherà una sfocatura gaussiana alle tue immagini. Dovrai fornire un valore di lunghezza che determinerà quanti pixel devono fondersi l'uno con l'altro. Ciò implica che un valore maggiore fornirà un'immagine più sfocata. Tenere presente che non è possibile utilizzare la percentuale per determinare il raggio di sfocatura. Se non si specifica un parametro, viene utilizzato il valore 0. La sintassi corretta per l'utilizzo di questo filtro è:
filtro: sfocatura ()
Il blur () il filtro non accetta valori negativi.
Questo filtro applica un moltiplicatore lineare alle immagini, rendendole più luminose o più deboli rispetto alle immagini originali. Accetta un numero e un valore percentuale. Allo 0% otterrai un'immagine completamente nera. Al 100% si ottiene l'immagine originale senza modifiche. Valori più alti producono immagini più luminose. Un valore sufficientemente elevato trasformerà l'immagine prevalentemente bianca. La sintassi corretta per utilizzare questo filtro è:
filtro: luminosità ([| ])
Questo filtro non accetta neanche valori negativi.
Questo filtro cambia il contrasto delle tue immagini. Proprio come il filtro della luminosità, accetta un numero e valori percentuali. Un valore 0% produrrà un'immagine completamente grigia. L'impostazione del valore su 100% non ha alcun effetto. Valori superiori al 100% produrranno immagini ad alto contrasto. Non è consentito utilizzare valori negativi con il contrasto() filtro. La sintassi corretta per utilizzare questo filtro è:
filtro: contrasto ([| ])
Quasi ognuno di voi potrebbe aver usato le ombre delle scatole almeno una volta. Il problema con le ombre delle scatole è che sono squadrate. Non puoi usarli per creare ombre di forme irregolari. D'altra parte, il drop-ombra filtro crea ombre attorno al contorno di un'immagine. È fondamentalmente una versione sfocata della maschera alfa dell'immagine di input. La sintassi corretta da usare drop-ombra è:
filtro: drop-shadow (2,3 ? )
Sono richiesti i primi due valori di lunghezza e impostano l'offset dell'ombra orizzontale e verticale. Il terzo
Questo filtro renderà le tue immagini in scala di grigi. Un valore dello 0% lascerà l'immagine invariata, mentre un valore del 100% renderà l'immagine completamente in scala di grigi. Qualsiasi valore tra questi due effetti sarà un moltiplicatore lineare su questo effetto. Non è possibile utilizzare valori negativi con il in scala di grigi () filtro. La sintassi corretta per utilizzare questo filtro è:
filtro: scala di grigi ([| ])
Questo filtro applicherà una rotazione della tonalità sulle tue immagini. Il parametro (passato come un angolo) determinerà il numero di gradi attorno al cerchio di colori che le immagini verranno regolate. Con un valore 0deg l'immagine finale sarà invariata. Se specifichi un valore oltre 360deg, il filtro si limita appena. La sintassi corretta per utilizzare questo filtro è:
filtro: hue-rotate ()
Questo filtro invertirà le tue immagini. La quantità di inversione dipende dal valore del parametro che hai passato. Un'inversione dello 0% non avrà alcun effetto sull'immagine. D'altra parte, un valore del 100% invertirà completamente l'immagine. Un valore del 50% produrrà un'immagine completamente grigia. Qualsiasi valore compreso tra gli estremi sarà un moltiplicatore lineare dell'effetto. Questo filtro non accetta valori negativi. La sintassi corretta per usare il invertire() il filtro è:
filtro: invert ([| ])
Il filtro di opacità applica la trasparenza all'immagine di input. Un valore pari allo 0% implica che desideri l'opacità dello 0%, il che comporta una trasparenza completa. Allo stesso modo, un valore del 100% produce un'immagine completamente opaca.
Il filtro è simile alla proprietà di opacità in CSS. L'unica differenza è che in questo caso alcuni browser potrebbero fornire l'accelerazione hardware per migliorare le prestazioni. La sintassi corretta per utilizzare questo filtro è:
filtro: opacità ([| ]);
Questo filtro determina la saturazione delle immagini. La saturazione stessa dipende dal valore del parametro. Non puoi usare valori negativi con questo filtro. A 0%, il valore minimo possibile, l'immagine sarà completamente insaturo. Con un valore di saturazione del 100%, l'immagine rimane invariata. Per ottenere immagini super-saturate, dovrai utilizzare valori superiori al 100%. La sintassi corretta per utilizzare questo filtro è:
filtro: saturo ([| ])
Questo filtro trasformerà le tue immagini originali in seppia. Al 100% del valore si otterrà un seppia completo e un valore dello 0% non avrà alcun effetto sull'immagine. Tutti gli altri valori che si trovano nel mezzo saranno moltiplicatori lineari di questo filtro. Non è consentito utilizzare valori negativi con questo filtro. La sintassi corretta per usare il seppia () il filtro è:
filtro: sepia ([| ])
Potrebbero esserci situazioni in cui si desidera utilizzare i propri filtri sulle immagini. Il url filtro prenderà la posizione di un file XML che specifica un filtro SVG. Accetta anche un'ancora per un elemento filtro specifico. Ecco un esempio che risulta nella posterizzazione della nostra immagine:
// Il filtro // CSS richiesto per applicare questo filtro: url (#posterize);
Il risultato finale dopo l'applicazione del filtro sarebbe simile all'immagine seguente:
Se non sei soddisfatto dell'output di un singolo filtro, puoi applicarne una combinazione su una singola immagine. L'ordine con cui si applicano i filtri può produrre risultati leggermente diversi. Più filtri possono essere applicati nel modo seguente:
filtro: contrasto seppia (0.8) (2); filtro: saturazione (0,5) luminosità della tonalità (90 °) (1,8);
Quando si utilizzano più filtri insieme, la prima funzione di filtro nell'elenco viene applicata sull'immagine originale. I filtri successivi vengono applicati all'output dei filtri precedenti. Questa demo mostra due altre combinazioni di filtri in azione.
In alcune circostanze speciali, l'ordine dei filtri può produrre risultati completamente diversi. Ad esempio, utilizzando seppia () dopo in scala di grigi () produrrà un output seppia e usando in scala di grigi () dopo seppia () risulterà in un output in scala di grigi.
La proprietà del filtro può essere animata. Con la giusta combinazione di immagini e filtri, puoi sfruttare questa funzionalità per creare alcuni effetti sorprendenti. Considera lo snippet di codice riportato di seguito:
@keyframes day-night 0% filter: hue-rotate (0deg) brightness (120%); 10% filter: hue-rotate (0deg) brightness (120%); 20% filter: hue-rotate (0deg) brightness (150%); 90% filter: hue-rotate (180deg) brightness (10%); 100% filter: hue-rotate (180deg) brightness (5%);
Sto usando il tonalità-rotate () e luminosità() filtrare insieme per creare l'illusione del giorno e della notte. L'immagine originale ha una tonalità arancione. Fino al 20% dell'animazione, aumento gradualmente la luminosità e mantengo la rotazione della tonalità a zero. Questo crea l'effetto di una giornata di sole. Quando termina l'animazione, ruoto la tonalità di 180 gradi. Ciò si traduce in una tonalità blu. Combinare questo con una luminosità molto bassa crea l'effetto della notte.
Oltre agli 11 filtri di cui abbiamo parlato sopra, c'è anche un personalizzato () filtro. Ti permette di creare diversi tipi di effetti usando gli shader. Ci sono alcuni problemi con personalizzato () filtri che hanno fermato il loro sviluppo. Adobe sta lavorando attivamente per trovare soluzioni ai problemi che emergono durante l'utilizzo personalizzato () filtri. Speriamo che presto saranno disponibili per gli sviluppatori da utilizzare nei loro progetti.
Ora, torniamo in pista. I filtri vengono applicati su tutte le parti dell'elemento di destinazione, inclusi testo, sfondo e bordi. Ecco una demo di base per provare una combinazione di filtri su varie immagini.
Come hai visto nelle ultime due sezioni, i filtri CSS possono cambiare completamente le immagini a cui sono applicati. Tuttavia, a volte non è abbastanza. Nella parte successiva di questa serie, discuterò su come utilizzare i metodi di fusione per modificare le immagini.
Accentsconagua