Guida Filtri alle foto con CSS

[sant0]

Cercando sul web qualche tempo fa, ho scoperto un tag css: filter. Esso ti permette di applicare dei filtri alle immagini del tuo sito web.
Questo tag non è supportato in tutti browser, per questo ti consiglio di andare

Perfavore, Entra oppure Registrati per vedere i Link!

per vedere in quali browser (e versioni) è supportato.

In Mozilla Firefox è supportato il tag filter, mentre in Chrome, Safari, Opera, iOS Safari, Android Browser e Chrome for Android si deve usare -webkit-filter.
Bando alle ciance ed iniziamo!! Il tutorial sarà costituito da img prima della modifica ed img dopo la modifica.

Prendiamo come esempio quest'immagine:

blur
Effetto che ti permette di dare una sfocatura all'immagine. Il valore della sfocatura va specificato in px. (0px è l'img base).

esempio di script:
[CSSS]
img { filter: blur(10px); -webkit-filter: blur(10px); }
[/CSSS]

brightness
Effetto che ti permette di dare luminosità all'immagine. Il valore della luminosità va specificato in percentuale partendo da 100% (l'img base). Aumentando la percentuale la luminosità sarà più accentuata, diminuendo la percentuale la luminosità sarà meno accentuata (0% darà l'img un colore tutto nero).

esempio di script:
[CSSS]
img { filter: brightness(130%); -webkit-filter: brightness(130%); }
[/CSSS]

contrast
Effetto che ti permette di regolare il contrasto. Il valore del contrasto va specificato in percentuale partendo da 100% (l'img base). Aumentando la percentuale il contrasto sarà più accentuato, diminuendo la percentuale il contrasto sarà meno accentuato.

esempio di script:
[CSSS]
img { filter: contrast(160%); -webkit-filter: contrast(160%); }
[/CSSS]

drop-shadow
Effetto che ti permette di dare un'ombra alla foto. Il valore viene dato come il tag box-shadow (asse x, asse y, sfocatura, colore).

esempio di script:
[CSSS]
img { filter: drop-shadow(10px 10px 10px black); -webkit-filter: drop-shadow(10px 10px 10px black); }
[/CSSS]

grayscale
Effetto che ti permette di regolare la scala dei grigi. Il valore viene dato in percentuale (0% è l'img base, 100% il valore massimo).

esempio di script:
[CSSS]
img { filter: grayscale(100%); -webkit-filter: grayscale(100%); }
[/CSSS]

hue-rotate
Effetto che ti permette di "ruotare" la tinta unita. Il valore viene dato con un angolo (da 0deg a 360deg).

esempio di script:
[CSSS]
img { filter: hue-rotate(100deg); -webkit-filter: hue-rotate(100deg); }
[/CSSS]

invert
Effetto che ti permette di invertire i colori dell'immagine. Il valore viene dato in percentuale (0% è l'img base, 100% il valore massimo).

esempio di script:
[CSSS]
img { filter: invert(100deg); -webkit-filter: invert(100deg); }
[/CSSS]

opacity
Effetto che ti permette di regolare l'opacità dell'immagine. Il valore viene dato in percentuale (0% l'img è totalmente trasparente, 100% è l'img base).

esempio di script:
[CSSS]
img { filter: opacity(90%); -webkit-filter: opacity(90%); }
[/CSSS]

saturate
Effetto che ti permette di regolare la saturazione dell'immagine. Il valore viene dato in percentuale. Si parte dal 100% (img base), si desatura scendendo verso lo 0% (99%,98%,97%...), si satura salendo (101%,102%...).

esempio di script:
[CSSS]
img { filter: saturate(130%); -webkit-filter: saturate(130%); }
[/CSSS]

sepia
Effetto che da un effetto seppia all'immagine. Il valore viene dato in percentuale (0% img base, 100% effetto massimo).

esempio di script:
[CSSS]
img { filter: sepia(90%); -webkit-filter: sepia(90%); }
[/CSSS]

Oltre questi effetti, si può dare più di un effetto ad un img:
[CSSS]
img { filter: contrast(150%) saturate(150%) sepia(20%); -webkit-filter: contrast(150%) saturate(150%) sepia(20%); }
[/CSSS]
I vari effetti non devono essere separati dalla virgola.
Il codice sopra trasforma l'img così:

Spero la guida vi sia piaciuta, alla prossima :soso:
PS: La foto base l'ho presa da google.

 

[UNI▼ERS▲L]

Ottima guida, secondo me da sticky.
Davvero bravo ;)

 

[ptm]

Bella guida, complimenti!

 

[#Settings]

E' una figata! Non avevo idea che ci fossero questi filtri..

 

[UNI▼ERS▲L]

E' una figata! Non avevo idea che ci fossero questi filtri..

Le magie del sottovalutato CSS ;)

 

[sant0]

Le magie del sottovalutato CSS ;)

Già.. con la versione CSS 3 si possono fare tantissime cose oltre questo (tipo rotation, trasformation, transition...)

 

[chack1172]

ottima guida , non sapevo si potesse aggiungere filtri tramite css

 

[PSiimo]

La guida è davvero ottima, però ho da ribattere a livello SEO , velocità e versioni mobile.

A livello SEO queste immagini cosi (con i filtri) vengono viste da google non proprio come "Inappropriate", ma come "difficile comprensione" e quindi GoogleBot tende a non indicizzare tali.

Velocità, questi filtri comunque comportano un aumento del carico per il carimento di tali (parliamo di secondi o addirittura di millesimi) , ma per google molte volte fanno la differenza.

Mobile: Alcuni dispositivi non riconoscono questi filtri, non riescono proprio a prenderli. (Potrò anche sbagliarmi con i moderni smartphone).

Per il resto davvero ottimo ;)

 

[sant0]

@PSiimo nel link che ho inserito ci sono tutti i browser in cui è supportato. Per Windows Phone (che usa IE), blackberry e cellulari non smartphone che accedono ad internet non si vedranno, ma su Android e iOS sì visto che usano Google Chrome e/o iOS Safari ^^

 

[ptm]

Rilievo accordato per la buona spiegazione e tutte le anteprime che hai messo ;)

 

[#Magnesio]

Bella guida e bellissimo effetti , complimenti ! )