Snippet CSS: pulsanti social effetto rollover

Salve ragazzi, era da un po’ di tempo che non mi facevo sentire. Presto scriverò un articolo per raccontarvi come sta andando la mia esperienza con Glaamy.

Oggi invece voglio condividere con voi uno Snippet di codice che ho creato per Glaamy e penso possa tornare utile anche a voi. Pulsanti Social con effetto rollover molto semplici da realizzare.

In questo tutorial impareremo ad usare le CSS transitions per animare le nostre icone social al passaggio del mouse.

Prima di tutto creiamo la struttura in HTML:

<div class="social-nw">
 <a href="#" target="_blank" class="social"></a>
 <a href="#" target="_blank" class="social"></a>
 </div>

Andremo poi a creare le immagini delle nostre icone tramite Photoshop o un altro programma di grafica. Creiamo delle icone 31 x 31 px in un unico file. Avremo quindi l’icona normale e sotto l’icona attiva (hover), staccata dall’altra di circa 10px.

Salviamo in formato .gif e carichiamola nella nostra cartella immagini. Dobbiamo ora aggiungere lo stile dei pulsanti:

1. Inseriamo l’immagine creata tramite modulo CSS con la proprietà ‘background‘. Comunichiamo la larghezza, l‘altezza, la posizione dell’icona e un piccolo margine per staccarla dalle successive.

.social-nw a {
   background: url(http://aleweb.eu/wp-content/uploads/2013/07/fb.gif);
   width: 31px;
   height: 31px;
   float:right;
   margin-right:1px;
}

2. Togliamo alcuni degli stili preimpostati del codice e il cursore del mouse.

.social-nw a {
   background: url(http://aleweb.eu/wp-content/uploads/2013/07/fb.gif);
   width: 31px;
   height: 31px;
   float:right;
   margin-right:1px;
   text-decoration: none;
   line-height: inherit; 
   cursor: pointer;
}

3. Aggiungiamo le CSS transitions per creare un effetto rollover verso il basso. Con la prima dichiarazione definiamo la proprietà che andremo a modificare. In questo caso digitiamo ‘all‘ per dare a tutte le proprietà lo stesso effetto di transizione. Impostiamo successivamente la durata in secondi (potete modificarlo in base a quanto volete la velocità del rollover) e inseriamo un ‘cambio di velocità’ tramite la proprietà “Transition-timing-function” (qui per vederle tutte).

.social-nw a {
   background: url(http://aleweb.eu/wp-content/uploads/2013/07/fb.gif);
   width: 31px;
   height: 31px;
   float:right;
   margin-right:1px;
   text-decoration: none;
   line-height: inherit; 
   cursor: pointer;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

4. Infine inseriamo l’attributo hover per cambiare l’icona superiore con quella inferiore del nostro file immagine.

.social:hover {
   background-position:bottom!important; 
}

Sfortunatamente non tutti i browser supportano le CSS transitions. Per avere un effetto simile siamo costretti ad utilizzare script tramite javascript o jquery. Qui di seguito trovate il codice e l’effetto descritto nell’articolo: jsFiddle.