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
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.
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.
Ultima modifica: