Immagine originale
Questa è l'immagine originale di esempio senza filtri ed effetti applicati
Nelle pagine web potrete usare le immagini originali e modificarle nella visualizzazione con facili istruzioni, usando solo il foglio di stile. Ci sono molti filtri ed effetti che si possono applicare compatibili con tutti i browser moderni.
Questa è l'immagine originale di esempio senza filtri ed effetti applicati
L’immagine colorata viene convertita in scala di grigi. Il valore del parametro è in percentuale e varia da 0 (effetto nullo) a 100 (effetto massimo).
Applicato su tutte le immagini della pagina web
img { filter: grayscale(100%); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: grayscale(100%); }
Per ottenere un effetto retrò di tipo fashion b/n si può giocare sulla percentuale di grayscale, ottenendo immagini non completamente in scala di grigi ma meno colorate e dall'aspetto raffinato.
Applicato su tutte le immagini della pagina web
img { filter: grayscale(70%); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: grayscale(70%); }
L’immagine colorata viene convertita sui toni del seppia, per dare un effetto anticato. Il valore del parametro è in percentuale e varia da 0 (effetto nullo) a 100 (effetto massimo).
Applicato su tutte le immagini della pagina web
img { filter: sepia(90%); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: sepia(90%); }
L’immagine viene resa semitrasparente in base al valore scelto. Il valore del parametro è in percentuale e varia da 0 (immagine trasparente) a 100 (immagine opaca e quindi effetto nullo). L'effetto finale è quello di un'immagine più o meno sbiadita.
Applicato su tutte le immagini della pagina web
img { filter: opacity(50%); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: opacity(50%); }
Rende l'immagine più scura o più chiara in base al valore scelto. Il valore del parametro è in percentuale e varia in questo modo:
- da 0 a 99 immagine più scura
- 100 immagine non modificata
- da 100 in su immagine più chiara e luminosa (con valori molto alti l'immagine si deteriora e risulta poco fruibile)
Vediamo un esempio con valore 150%.
Applicato su tutte le immagini della pagina web
img { filter: brightness(150%); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: brightness(150%); }
Rende l'immagine meno o più contrastata in base al valore scelto. Il valore del parametro è in percentuale e varia in questo modo:
- da 0 a 99 immagine a contrasto ridotto
- 100 immagine non modificata
- da 100 in su immagine a contrasto maggiore (con valori molto alti l'immagine si deteriora e risulta poco fruibile)
Vediamo un esempio con valore 150%.
Applicato su tutte le immagini della pagina web
img { filter: contrast(150%); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: contrast(150%); }
Rende l'immagine meno o più saturata nei colori in base al valore scelto. Il valore del parametro è in percentuale e varia in questo modo:
- da 0 a 99 immagine a saturazione ridotta
- 100 immagine non modificata
- da 100 in su immagine a saturazione maggiore (con valori molto alti l'immagine si deteriora e risulta poco fruibile)
Vediamo un esempio con valore 50%. Questo, con valori parecchio inferiori a 100%, è un altro modo per ottenere l'effetto retrò stile fashion b/n.
Applicato su tutte le immagini della pagina web
img { filter: saturate(50%); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: saturate(50%); }
L’immagine viene sfocata progressivamente all'aumentare del valore. Il valore del parametro è in pixel e varia da 0 (effetto nullo) in su.
Applicato su tutte le immagini della pagina web
img { filter: blur(10px); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: blur(10px); }
Applica un'ombra esterna all'immagine. Vi sono alcuni parametri che servono a definire il tipo di ombra. Seguendo l'ordine di scrittura essi sono:
- distanza orizzontale in pixel dell’ombra rispetto all’immagine
- distanza verticale in pixel dell’ombra rispetto all’immagine
- grado di sfocatura dell’ombra in pixel
- colore dell’ombra in formato HEX (es. #999999 - ombra grigia) oppure RGBA (es. rgba (128,128,128,0.5) - ombra grigia con opacità 50%)
Vediamo un esempio con un'ombra nera con opacità 30%, distante 10 pixel in orizzontale e in verticale e con una sfocatura di 20 pixel.
Applicato su tutte le immagini della pagina web
img { filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.3)); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.3)); }
Questo è un effetto un po' psichedelico, visto molte volte soprattutto nel passato. Non è molto elegante ma ha il suo perchè! Il valore è espresso in gradi (deg) e più che spiegarlo vi invitiamo a provarlo. Variando il valore si compie tutto il giro della gamma colori.
Applicato su tutte le immagini della pagina web
img { filter: hue-rotate(180deg); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: hue-rotate(180deg); }
Altro effetto un po' bizzarro e datato, ma che può tornare molto utile in alcuni casi. Il valore del parametro è in percentuale e varia da 0 (effetto nullo) a 100 (effetto massimo di inversione colori).
Applicato su tutte le immagini della pagina web
img { filter: invert(100%); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: invert(100%); }
Può risultare molto pratico mettere insieme più effetti in un'unica istruzione, per caratterizzare facilmente le immagini. Vediamo un esempio che mette insieme una desaturazione dei colori combinata con un aumento della luminosità.
Applicato su tutte le immagini della pagina web
img { filter: saturate(30%) brightness(150%); }
Applicato sulle immagini della pagina web con class="nomeclasse"
img.nomeclasse { filter: saturate(30%) brightness(150%); }
