Icone sociali con effetto 3D.

Realizzare e installare dei bottoni in tre dimensioni per condividere i post sui social network.

Land of Web ha creato tutta una serie di icone sociali di diverse dimensioni che possono essere utilizzate per creare un effetto tridimensionale al passaggio del mouse oltre a inserire i bottoni per i collegamenti alla pagina Facebook, all'account Twitter, a quello Google Plus e altri ancora.

Se cliccate su Download scaricherete un file in formato ZIP con tutta una serie di icone a 32px, 64px, 128px e 256px. L'idea è quella di unire queste icone in una striscia di quelle che vogliamo visualizzare nel nostro sito in modo da metterne due per ciascun social come nella seguente immagine

La composizione precedente è stata realizzata da Pizcos.net. Come vedete ciascuna icona è stata affiancata a quella da visualizzare quando diventa attiva perché puntata con il mouse. La difficoltà sta nel configurare le distanze in modo da poter visualizzare l'icona giusta. Chi vuole aggiungere altri social deve quindi inserire i relativi CSS dopo essersi creata l'immagine complessiva di tutti i bottoni da inserire. Le icone a disposizione sono relative a Behance, Blogger, Deviantart, Digg, Dribbble, Facebook, Flickr, Forrst, Google+, RSS Feed, mStumbleupon, Tumblr, Twitter e Youtube. L'esempio seguente è relativo a icone da 64 pixel

L'installazione di questi bottoni diventa semplicissima dopo che si è fatto il lavoro grafico. Basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare il seguente codice

<style type="text/css">
/* Bottoni Social Network */
.icone-sociali {width: 300px;}
.bottone-rss, .bottone-twitter, .bottone-facebook, .bottone-google{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7KRwMvKJfx4G4J-jDSDfVZa9HVPI-8caADuGKK0wihbcPmjIL4liaybBEB0bDGuTei8H9NIEaUuigQdV7minH5ohi6XK5GsOOLp929rUxSN2Er_dKj0EDSL5xKamK5ti2tY3RSG33e4/s582/socialico.png) no-repeat top left; }
.bottone-facebook{ background-position: 0 0; width: 64px; height: 64px; float:left;}
.bottone-facebook:active{ background-position: -74px 0; width: 64px; height: 64px;}
.bottone-facebook:hover{ background-position: -74px 0; width: 64px; height: 64px;}
.bottone-google{ background-position: -148px 0; width: 64px; height: 64px;float:left;}
.bottone-google:active{ background-position: -222px 0; width: 64px; height: 64px;}
.bottone-google:hover{ background-position: -222px 0; width: 64px; height: 64px;}
.bottone-rss{ background-position: -296px 0; width: 64px; height: 64px; float:left;}
.bottone-rss:active{ background-position: -370px 0; width: 64px; height: 64px;}
.bottone-rss:hover{ background-position: -370px 0; width: 64px; height: 64px;}
.bottone-twitter{ background-position: -444px 0; width: 64px; height: 64px; float:left;}
.bottone-twitter:active{ background-position: -518px 0; width: 64px; height: 64px;}
.bottone-twitter:hover{ background-position: -518px 0; width: 64px; height: 64px;}
</style>
<div class="icone-sociali">
<a href="URL DEI FEED" target="_blank" title="Sottoscrivi il feed" rel="nofollow"><span class="bottone-rss"></span></a> <a href="URL DI TWITTER" target="_blank" title="Seguimi su Twitter" rel="nofollow"><span class="bottone-twitter"></span></a> <a href="URL DI FACEBOOK" target="_blank" title="Segui su Facebook" rel="nofollow"><span class="bottone-facebook"></span></a> <a href="URL DI GOOGLE PLUS" target="_blank" title="Seguimi su Google Plus" rel="nofollow"><span class="bottone-google"></span></a>
</div>

Si salva e si posiziona a piacere. Le altezze delle icone sono tutte di 64 pixel visto che è stata scelta quella misura. Essendo in questo caso in numero di 4 è stata scelta la larghezza di 300 pixel che ha permesso di inserire dello spazio tra icona e icona. Nel CSS del codice si può vedere che ciascun bottone ha l'opzione normale e quella active e hover che hanno gli stessi parametri. A seconda di come si è creata l'immagine il cui URL è visualizzato in rosso nelle prime righe, dobbiamo configurare le distanze dello sfondo in modo che appaia l'icona corrispondente quando si punta con il mouse. Questi numeri però possono benissimo essere calibrati al meglio in fase di test dei bottoni. Ovviamente dobbiamo inserire gli URL dei Feed e dei nostri account nei vari social. Se si vuole inserire un altro bottone dobbiamo modificare l'immagine e mettere altre due icone. Mettiamo che si voglia aggiungere Youtube, dobbiamo allora inserire .bottone-youtube  prima di { background: url(https ….  e .bottone-youtube, .bottone-youtube:acrtive, e .bottone-youtube:hover con i relativi parametri del posizionamento.

Aggiornamento: Domenico Leonardi, un lettore del blog, ha realizzato una immagine che consente anche di visualizzare il bottone di Youtube in tre dimensioni accanto agli altri quattro. Se interessati consultate il lavoro di Domenico in questo post della pagina fan del blog.