Come utilizzare i filtri CSS3 per creare immagini accattivanti

Transcript

1 Come utilizzare i filtri CSS3 per creare immagini accattivanti I filtri css3 sono potenti strumenti che permettono di modificare le immagini direttamente sul browser, creando effetti di transizione e animazione al passaggio del mouse sull immagine. Il sito web diventa più accattivante perché cambiamo il modo di visualizzare il contenuto del sito stesso. Con i filtri è possibile, infatti, creare dei blocchi con luce, sfocatura, manipolazione del colore e applicare tanti altri effetti agli elementi della pagina web. Dobbiamo però sottolineare che la compatibilità crossbrowser dei filtri CSS3 è molto bassa, del 44% circa, per cui bisogna utilizzarli con molta cautela. Allo stato attuale, i filtri sono visualizzabili solo in Safari e Chrome con i prefissi nativi del browser, mentre non c è nessuna compatibilità per Mozilla, IE e Opera. Cosa sono i filtri? Secondo le specifiche del W3C: "A filter effect is a graphical operation that is applied to an element as it is drawn into the document. It is an image-based effect, in that it takes zero or more images as input, a number of parameters specific to the effect, and then produces an image as output. In parole povere l effetto di un filtro è un operazione grafica applicata a un elemento come se questo fosse disegnato su un documento. Il filtro viene eseguito su un immagine di partenza per la quale vengono specificate una serie di parametri che producono un immagine finale modificata con l effetto del filtro. I filtri disponibili sono diversi e sono: blur grayscale sepia brightness contrast hue-rotation invert saturate opacity dropshadow #1 - UTILIZZO DI UN SOLO FILTRO Per utilizzare i filtri dobbiamo utilizzare i prefissi nativi dei browsers e in questo caso, poiché i filtri 1 / 12

2 sono visualizzabili solo su Safari e Chrome, dobbiamo utilizzare il prefesso nativo -webkit-. Vediamo uno ad uno gli effetti da poter utilizzare per poter creare un effetto visivo più accattivante. Consideriamo il filtro css3 esattamente come quello messo di fronte all obiettivo di una macchina fotografica, che ci permette di vedere l immagine che abbiamo di fronte modificata grazie all effetto dello "schermo" posto tra l'obbiettivo e il soggetto che vogliamo fotografare. I filtri sono utilissimi per modificare le immagini sul browser ma possono causare una minor performance del sito web in termini di caricamento della pagina. Cosa succede quando utilizziamo un filtro? Il filtro mischia i colori di tutti i pixel dell immagine per ottenere un risultato finale; questa operazione rallenta notevolmente il caricamento della pagina stessa. Ma, fortunatamente, non tutti i filtri appesantiscono la pagina allo stesso modo e se utilizzati in maniera ponderata non determinano nessuna conseguenza in termini di ottimizzazione e performance. FILTRO BLUR L effetto di questo filtro determina la sfocatura dell immagine di 10 px grazie all utilizzo del raggio che permette facilmente di sfocare l immagine nel browser: 2 / 12

3 FILTRO GRAYSCALE Con questo effetto l immagine a colori diventa un immagine in bianco e nero grazie alla possibilità di applicare una percentuale della funzione scala di grigio. Su una scala di grigio da 0 a 100%, è possibile decidere quanta tonalità di grigio si vuole aggiungere all immagine. 3 / 12

4 FILTRO SEPPIA Con il filtro seppia l immagine di destra diventa di colore giallino simile all effetto seppia di instagram. 4 / 12

5 FILTRO BRIGHTNESS Con questo filtro decidiamo quanta luminosità vogliamo attribuire a un immagine. Più alta è la percentuale, più brillantezza sarà aggiunta a un immagine. 5 / 12

6 FILTRO CONTRAST Grazie a questo filtro possiamo aggiungere facilmente il contrasto tra gli elementi dell immagine. Se attribuiamo un valore di 0% l immagine diventa simile ad un immagine nera, un po come succede con il filtro brightness 0%. 6 / 12

7 FILTRO HUE-ROTATE Quante volte hai giocato con il filtro tonalità/saturazione in Photoshop? Bene adesso puoi farlo direttamente sul browser. 7 / 12

8 FILTRO INVERT Con questo filtro invertiamo il colore modificando la percentuale di 100 al nuovo filtro invert. 8 / 12

9 FILTRO SATURATE Con il filtro saturate non facciamo altro che aumentare la saturazione dell immagine, o scegliere di desaturarla fino ad ottenere lo stesso risultato che si ha utilizzando il filtro grayscale (100%) 9 / 12

10 FILTRO OPACITY 10 / 12

11 FILTRO DROP-SHADOW Il filtro Drop Shadow è sicuramente uno dei filtri più conosciuti e serve ad aggiungere un ombra esterna all immagine. I parametri servono a stabilire la posizione dell ombra, la sua distanza dall immagine e la sfocatura dell ombra. #2 - UTILIZZO COMBINATO DI PiU FILTRI È possibile utilizzare anche più filtri insieme per creare un effetto unico, in questo caso dobbiamo semplicemente aggiungere due filtri in un unica dichiarazione, con uno spazio tra un filtro e l'altro. #3 - UTILIZZO DI UN FILTRO SU UN IMMAGINE HOVER Possiamo anche creare un effetto hover sulle immagini da applicare al tag: 11 / 12

12 In tal caso però l effetto sarebbe troppo meccanico al passaggio del mouse per questo sarebbe meglio, oltre a risultare più gradevole all occhio, inserire un effetto transizione come nel punto successivo. #4 - UTILIZZO DEL FILTRO CON TRANSIZIONE L effetto transizione serve a rendere più graduale il passaggio dall effetto iniziale dell immagine a quello del filtro, oltre a renderla più gradevole e accattivante. Nel tag img aggiungiamo il codice per la transizione come segue: #5 - UTILIZZO DELLE ANIMAZIONI SUI FILTRI Infine è possibile anche creare delle vere e proprie animazioni grazie ai fotogramma chiave di css3. Visualizza gli effetti nel browser (Chrome o Safari) Download gli esempi Grazie a questi effetti è possibile creare delle gallerie immagini molto accattivanti. Guardate questo esempio che combina diversi filtri e li ha applicati ad una galleria immagini. Di solito i filtri sono associati alle immagini ma queste operazioni possono essere anche applicate a pulsanti e video con la possibilità di aggiungere al sito web degli effetti visuali ad alto impatto per l attenzione degli utenti. Hai mai provato a lavorare con i filtri? Sicuramente c è molto altro da dire su questo argomento soprattutto per quelli applicati alle immagini SVG ma credo che questo sia un ottimo punto di partenza! Che ne pensi? 12 / 12 Powered by TCPDF (