Social-Effect

Feed - phpBB3
Rispondi
Tiger
Provetto del Forum
Provetto del Forum
Messaggi: 76
Iscritto: giovedì 26 maggio 2011, 16:22
Località: Roma

Social-Effect

Messaggio da Tiger » mercoledì 26 dicembre 2012, 0:49

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 105 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;
}



Rispondi

Torna a “phpBB3”