Angolo di cielo

Con questa semplicissima modifica, andremo ad aggiungere le icone social, facebook, twitter, ecc. con effetto di transizione, al passaggio del mouse cioè, le iconcine ruoteranno in un piacevolissimo effetto.

Autore: Tiger

Stili compatibili:
Prosilver e derivati:
Subsilver2 e derivati
Uppare le immagini contenute nel seguente archivio .rar nella cartella theme/images del vostro stile in uso.

icone.rar: (25.81 KiB) Scaricato 106 volte

Inizio guida:
Aprire styles/prosilver/theme/common.css
Aggiungere in fondo:

Codice: Seleziona tutto

/* Social-Effect by Tiger\www.bbcodeitalia.com 
--------------------------------------------- */
#dec2 img{
-moz-transition: 2s;
-webkit-transition:2s ;

}

#dec2 img:hover{
-moz-transform: rotate(360deg);
-moz-transition: all 2s ease-in-out;
-webkit-transform: rotate(360deg);
-webkit-transition: all 2s ease-in-out;
}

Questo invece il relativo codice html da inserire a piacere in qualsiasi template si voglia far comparire le iconcine:

Codice: Seleziona tutto

<!-- Inizio Social-Effect by Tiger\www.bbcodeitalia.com -->		
		<div align="center" id="dec2">
&nbsp; <a rel="nofollow" href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/facebook.png" alt="*"></a> &nbsp; <a href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/twitter.png" alt="*">
<img width="64" height="64" src="{T_THEME_PATH}/images/linkedin.png" alt="*"> &nbsp; <a rel="nofollow" href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/yahoo.png" alt="*"></a> &nbsp; <a rel="nofollow" href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/rss.png" alt="*"></a> &nbsp; <a href="#">
</div>
<!-- Fine Social-Effect by Tiger\www.bbcodeitalia.com -->

Chiaramente si puo' dare qualsiasi allineamento si desideri

Codice: Seleziona tutto

<div align="center" id="dec2">

Subsilver 2:
Codice html invariato.
Aprire styles/subsilver2/theme/stylesheet.css
Aggiungere in fondo:

Codice: Seleziona tutto

/* Social-Effect by Tiger\www.bbcodeitalia.com 
--------------------------------------------- */
#dec2 img{
-moz-transition: 2s;
-webkit-transition:2s ;

}

#dec2 img:hover{
-moz-transform: rotate(360deg);
-moz-transition: all 2s ease-in-out;
-webkit-transform: rotate(360deg);
-webkit-transition: all 2s ease-in-out;
}