Regolazione immagine con effetti filtro CSS

Regolazione dell'immagine Luminosità e Contrasto, o trasformare l'immagine in Scala di grigi o sephia è una caratteristica comune che puoi trovare nell'applicazione di modifica delle immagini, come Photoshop. Ma ora è possibile aggiungere gli stessi effetti alle immagini web usando i CSS.

Questa capacità proviene dagli Effetti filtro che effettivamente si trovano ancora nella fase Bozze di lavoro. Tuttavia, il browser Webkit sembra essere un passo avanti nell'implementazione di questa funzionalità.

Facciamo un tentativo e useremo questa immagine di Mehdi Kh per dimostrarne gli effetti.

Gli effetti

Applicare gli effetti è molto semplice. Dai uno sguardo allo snippet qui sotto, per trasformare le immagini in in scala di grigi;

 img -webkit-filter: grayscale (100%);  

... e questo è per nero di seppia ala Instagram.

 img -webkit-filter: sepia (100%);  

Entrambi i nero di seppia e il in scala di grigi i valori sono indicati in percentuale dove 100% è il massimo e si applica 0% manterrà l'unchange dell'immagine, ma quando il valore non è specificato esplicitamente il 100% sarà preso come predefinito.

È anche possibile schiarire l'immagine, e possiamo farlo usando il luminosità funzione, come segue;

 img -webkit-filter: luminosità (50%);  

L'effetto di luminosità funziona come il contrasto e l'effetto seppia sopra il valore di 0% manterrà l'immagine così com'è e applicandola 100% illuminerà totalmente l'immagine, che probabilmente mostrerebbe solo una pagina bianca vuota invece di un'immagine.

Anche l'effetto di luminosità consente valori negativi, in cui lo farà scurire l'immagine.

 img -webkit-filter: luminosità (-50%);  

... e possiamo regolare il contrasto dell'immagine in questo modo.

 img -webkit-filter: contrasto (200%);  

C'è una piccola differenza su come funziona anche il valore, come puoi vedere in precedenza, abbiamo impostato il contrasto() di 200%, questo è perché il valore di 100% è il punto di partenza in cui l'immagine rimarrà invariata. Quando il valore è sotto 100%, diciamo 50%, l'immagine diventerà meno contrastata.

Inoltre, possiamo anche combinare l'effetto in un blocco di dichiarazione, come nell'esempio seguente. Trasformiamo l'immagine in in scala di grigi e aumentare il contrasto del 50% allo stesso tempo.

 img -webkit-filter: contrasto in scala di grigi (100%) (150%);  

Combinando il filtro con la transizione CSS3 possiamo renderlo elegante librarsi effetto.

 img: hover -webkit-filter: grayscale (0%);  img: hover -webkit-filter: sepia (0%);  img: hover -webkit-filter: luminosità (0%);  img: hover -webkit-filter: contrasto (100%);  

Infine, c'è un altro effetto che possiamo provare; il Sfocatura gaussiana, che sfocerà l'elemento mirato.

 img: hover -webkit-filter: blur (5px);  

Come in Photoshop, il valore di sfocatura è indicato in raggio di pixel e se il valore non è dichiarato esplicitamente, lo 0 verrà considerato come predefinito e l'immagine verrà lasciata così com'è.

Pensiero finale

Ci sono molti più effetti nelle specifiche. ad esempio tonalità rotazione, invertire e saturare, ma penso che siano meno applicati nei casi Web reali. Pertanto, la discussione era limitata a soli quattro effetti.

E, nonostante la discussione sia stata applicata alle immagini in questo tutorial, la proprietà può essere applicata anche a qualsiasi elemento nel DOM.

Infine, puoi visualizzare la demo dal vivo qui sotto. Si prega di notare che il filtro è attualmente supportato solo in Chrome 19 e al di sopra.

• dimostrazione
• Scarica fonte