Come creare CSS Sprite per le icone anche con effetto Hover.

Come velocizzare il caricamento di un sito creando delle Immagini Sprite e utilizzandole nei CSS con il tag background-position anche in relazione all'effetto hover.

Poco meno di due anni fa mi sono occupato di quelli che sono chiamati i CSS Sprite e che vengono molto ben visti da Google e dagli altri motori di ricerca perché permettono di minimizzare le chiamate HTTP del browser unificando gli URL delle immagini. Questo è importante per aumentare la velocità di caricamento delle pagine del nostro sito. 

Si tratta quindi di unire graficamente le varie icone in una sola immagine e quindi di richiamarla mediante le coordinate che questa ha nella immagine stessa. In realtà è più facile a dirlo che a farlo tanto che, visto che dovevo farlo per ottimizzare questo sito, ho ritenuto utile pubblicarci un post per aiutare tutti coloro che volessero fare lo stesso nei loro blog. Anche il lavoro grafico è piuttosto semplice e può essere fatto con Photoshop, con Gimp o anche con Paint.NET.

Partiamo dal post sulla installazione delle icone sociali nella versione desktop o mobile di Blogger. Il CSS per tali icone è comune alla visualizzazione anche con dispositivi mobili ed è il seguente

/* CSS ICONE SOCIALI INIZIO */
#facebookbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiayI_dEe-k6Vqv-ZDeoroDqJsNEGREaseGK2jYVGSqCkH8NM5g-KuOXgWO1dtXjnN5DDWn_m3WEmINZKqgGjr2s96xnymIhkYYAHPTptPQRGd-MYsDVUc-kQwnocAWUIJyzec_RbrhcwiR/s48-Ic42/facebook48.png);} 
#twitterbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirF0UHR1sCUWMq5h_-98Y83BcZaLdQijWhkRP9qhuZyebLlt8kFHC9guDQBErnFgvNiD47lSC3rMG2WmumnTO6HrGq6i2jXl0fp2kJyse2smiq4fYzlqZZ1KsacjK1e9dBymUhY6vNSTLR/s48-Ic42/twitter48.png);}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheBw8y6__gLuN8LYOxO3q7_HrCLRx8KKqwgToVBxopiQoANUOQZSz8qLmiqxlpCai8b9lXVvdDG54jnh_VvjIOpbwSdbjrB67aFSgN5fQ6sCmCsXRzABcWksbqAd7I55L4acnWJvm4Rxd_/s48-Ic42/googleplus48.png);}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW4dCb6gU6Z788Jenno9t-qPD9Ku-4pAPKD_E4RuHr7Vb08jNki2quCcjgVe8XbS6KlpjBTcfzN5mZ1fMywtCiewowlFyUFHalRmgcFVdrHUo7av2qKIDYrhAZfJHNDlz6deO6ga1xEGv4/s48-Ic42/linkedin48.png);}
#feedlybutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgkImeeu9DVrCNRL2WY48GME8qzeCp5jcmflA2GTCDCMgO5GxE9fCFnXI15RZMc6YR8wmnFs4v6BSkKnq00A-VlTuxLdxaLNClOOqh3zitW7RzK6z62tSHp0osM6wTHrsPkSo6mfWNPNK_/s48-Ic42/feedly56.png);}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxWuFWRGXCjVn6RnEAaOScXjE-dQrZ9sbRdRiGJajCo-YZbcTJL4NazZHZf6Qbh7TwrxhVFWBNP_iqBSbbT93mDWLWg_mOXo2vCg2-xLojzYny6yz2yPqrPy3_i9_9wf50-WpgLv10vlUA/s48-Ic42/whatsapp%25252048.png);}
#youtubebutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujrqlgujA9Ld1Cize4VTono9NRa1yfHL0o8_ifgXrNVRE2x1CvZUzAMQF-A7gwGHgNhaQWg6e9VaJfsnSMdafDYvkv9xwXEUvLCrHqMFlGxFP8l13-xtbyCZG-JIXPgpczHmmGkVd8chh/s48-Ic42/youtube48.png);}
#pinterestbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAs-QapCG7YZWsYsTAMfOF8mFGGZJ2ZR5-qz5jp8QGVXCJeq4FHDJRJsfSB7IlnSEZRZe36MBpD22Oqi78icsx4Q2nRMsYsPKAOw9-JSattDAGvHc_vKVgRaalK6gwFRNQHgGcom0Jjfn0/s48-Ic42/pinterest48.png);}
#instagrambutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMe927eP8_n_U_RRDcMmIUgyzX0rmNAOSFpNSpMIkU0A6yCzdLKwRV3uTaCX8l2e2wNN5P7eQccaLOFEf9vhElAdbm08qOmt-tACd4ymqXew4cReMt-vd8twYpKFAgiEcqdFCEJCNGr_RF/s48-Ic42/instagram48.png);}
/* CSS ICONE SOCIALI FINE */

Si tratta di 9 icone ciascuna delle quali ha naturalmente il suo URL. Il browser del visitatore dovrà quindi fare 9 richieste HTTP per poter caricare la pagina. Ciascuna icona misura 48x48 pixel e il primo passo per creare un CSS Sprite è quello di attaccare le icone una accanto all'altra per creare una sola immagine. Apriamo quindi Photoshop o Gimp o Paint.NET e andiamo su File > Nuovo e impostiamo un oggetto con larghezza 48x9=432 pixel e con altezza 48 pixel 

possibilmente con lo sfondo trasparente se si tratta di immagini in PNG.



Con Photoshop si va su File > Inserisci e si importano le varie icone

Si trascinano una accanto all'altra e quando sono ben posizionate si va sul destro del mouse e si clicca su Inserisci. Il lavoro è più semplice di quanto non sembri perché visto che le dimensioni dell'altezza sono le stesse il posizionamento è agevolato dallo stesso programma. Quando si sono importate tutte le icone si avrà una situazione come la seguente

in cui andare su File > Salva con nome per salvare l'immagine che si è creata

Ciascuna icona ha le sue coordinate cartesiane. Visto che c'è una sola fila l'ordinata sarà 0 mentre per l'ascissa avremo 0 per Facebook, -48px per Twitter, -96px per Google+, -144px per Linkedin, -192px per Feedly, ecc. Il numero negativo dipende dal fatto che ci spostiamo verso destra e quindi che si deve diminuire il valore dell'ascissa, un po' come accade nelle trasformazioni del sistema di riferimento cartesiano. L'immagine di background sarà quindi la stessa per tutte le icone con la differenza del tag background-position che ne determinerà la posizione. L'immagine dovrà naturalmente essere caricata su Picasa per ottenerne l'URL diretto. Il CSS muterà in questo modo

/* CSS ICONE SOCIALI INIZIO */
#facebookbutton a,#twitterbutton a,#googleplusbutton a,#linkedinbutton a,#feedlybutton a,#whatsapp_button1 a,#youtubebutton a,#pinterestbutton a,#instagrambutton a  {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0cGbYFkLTT5cXASpOoDxoBZrE2e5JrwQvOixY9uMQLlRbPWHP4R2m2DPa4vaIUmhlm3f7xll5FwMe_QnNG8xhz0Ed0QQNciNfWsEqscfFbO67GXJLZOiX5dsbFBxs3isGzffRsfI0nTzc/s432-Ic42/icone-sociali.png); no-repeat;} 
#facebookbutton a{display: block; width: 47px; height: 48px; margin: 0 auto; background-position:0 0;}
#twitterbutton a {display: block; width: 47px; height: 48px; margin: 0 auto; background-position:-47.6px 0;}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto;background-position:-95.5px 0;}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-143.5px 0;}
#feedlybutton a {display: block; width: 48px; height: 48px; margin: 0 auto;background-position:-191.5px 0;}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-239.5px 0px;}
#youtubebutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-287.5px 0;}
#pinterestbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-335.5px 0;}
#instagrambutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-383.5px 0;}
/* CSS ICONE SOCIALI FINE */

Per esempio per Feedly avremo background-position:-192px 0; dove 0 è comune a tutte le icone e si tratta della ordinata mentre -192px è la distanza dall'origine dell'asse. Come potete constatare però ci sono delle piccolissime differenze di decimali sia nel posizionamento sia nella larghezza di alcune icone perché la grafica non è mai precisissima, almeno per quello che riesco a fare io, e quindi si devono settare meglio le distanze per non visualizzare una piccolissima porzione della immagine adiacente. Con questo CSS ci sarà una sola chiamata HTTP con una enorme velocizzazione del sito. Adesso possiamo sostituire il CSS iniziale con questo.

COME CREARE UN CSS SPRITE CON EFFETTO HOVER

È noto come i browser rilevino il posizionamento del cursore e come sia possibile mediante i CSS modificare l'aspetto di un elemento quando sia puntato dal mouse. Facciamo lo stesso con le nostre icone facendole diventare nere in stile material design al passaggio del cursore. Dovremo cioè realizzare una immagine per poi impostare i rispettivi posizionamenti per ottenere questo risultato

Alle 9 icone che già abbiamo dovremo quindi attaccarci altre nove icone di aspetto diverso. Lo potremo fare con una sola riga mantenendo 0 come ordinata in tutte le posizioni ma, anche per avere un effetto di ribaltamento invece che di traslazione orizzontale, è meglio creare una immagine Sprite su due file. Dovremo quindi aprire Photoshop, o Gimp o Paint.NET, andare su File > Nuovo e impostare come dimensioni 48x9=432 di larghezza e 48x2=96 di altezza

Si va poi sempre su File > Inserisci e si importa l'immagine unidimensionale già realizzata



Sempre da File > Inserisci si selezionano e si inseriscono le altre icone



Quando si è terminato avremo un file immagine di questo genere

in cui andare su File > Salva con nome per scegliere il formato PNG. L'immagine Sprite così creata dovrà essere caricata su Picasa per ottenerne il link diretto.

Le coordinate delle icone della prima fila saranno le stesse e avranno come ordinata 0 mentre le coordinate delle icone della seconda fila saranno le stesse  di quelle della prima fila per quello che riguarda le ascisse mentre avranno come ordinata -48px. 

Adesso oltre a configurare il tag background-position per le icone normali dovremo farlo anche per quelle che si visualizzano con l'effetto hover. Si può anche usare un tag del CSS3 per settare la durata della trasformazione cioè la velocità del passaggio da una icona a un'altra quando si punti con il mouse. Alla fine verrà fuori questo nuovo CSS

/* CSS ICONE SOCIALI INIZIO */
#facebookbutton a,#twitterbutton a,#googleplusbutton a,#linkedinbutton a,#feedlybutton a,#whatsapp_button1 a,#youtubebutton a,#pinterestbutton a,#instagrambutton a,#facebookbutton a:hover,#twitterbutton a:hover,#googleplusbutton a:hover,#linkedinbutton a:hover,#feedlybutton a:hover,#whatsapp_button1 a:hover,#youtubebutton a:hover,#pinterestbutton a:hover,#instagrambutton a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZaf-8QphS4X3zz5RYQvlgNTAUmoRqIrm6ef1hzzdPp225x330H2fp4bbeAATA84R5IhKtfuTClexo-c718uzu2QqvjMnVWann1upJoYuKB-s2iRIvGsnZH9mnVUTK9Gay8Ml8D0T4Ion/s432-Ic42/icone-sociali-2.png); no-repeat; transition:all 0.2s ease 0s;}
#facebookbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:0 0;}
#twitterbutton a {display: block; width: 47px; height: 48px; margin: 0 auto; background-position:-47.6px 0;}
#googleplusbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-95.5px 0;}
#linkedinbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-143.5px 0;}
#feedlybutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-191.5px 0;}
#whatsapp_button1 a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-239.5px 0px;}
#youtubebutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-287.5px 0;}
#pinterestbutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-335.5px 0;}
#instagrambutton a {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-383.5px 0;}
#facebookbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:0 -48px;}
#twitterbutton a:hover {display: block; width: 47px; height: 48px; margin: 0 auto; background-position:-47.6px -48px;}
#googleplusbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-95.5px -48px;}
#linkedinbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-143.5px -48px;}
#feedlybutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-191.5px -48px;}
#whatsapp_button1 a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-239.5px -48px;}
#youtubebutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-287.5px -48px;}
#pinterestbutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-335.5px -48px;}
#instagrambutton a:hover {display: block; width: 48px; height: 48px; margin: 0 auto; background-position:-383.5px -48px;}
/* CSS ICONE SOCIALI FINE */

con una sola chiamata HTTP ma con ben 18 icone visualizzate. I CSS con a:hover sono quelli che definiscono la regola per le icone della seconda fila con ordinata -48px. La durata del passaggio da una icona all'altra è stata settata in 2 decimi di secondo da transition:all 0.2s ease 0s;. Lasciando tutto il resto del codice immutato e sostituendo questo CSS a quello iniziale avremo le nostre icone animate al passaggio del cursore con un indubbio impatto positivo nel visitatore.