Social-Effect
Inviato: 25/12/2012, 12:37
Pagina trascritta sul wiki: http://wiki.phpbbitalia.net/Social-effect
Con questa semplicissima modifica,andremo ad aggiungere le icone social,facebook,twitter ecc,con effetto di transizione,al passaggio del mouse cioe',le iconcine ruoteranno in un piacevolissimo effetto.
Autore:Tiger
Screen:
http://i.imgur.com/LhHuF.png
Demo:
Qui
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. Inizio guida:
Aprire styles/prosilver/theme/common.css
Aggiungere in fondo:
Questo invece il relativo codice html da inserire a piacere in qualsiasi template si voglia far comparire le iconcine:
Chiaramente si puo' dare qualsiasi allineamento si desideri
Subsilver 2:
Codice html invariato.
Aprire styles/subsilver2/theme/stylesheet.css
Aggiungere in fondo:
Screen:
http://i.imgur.com/0snjb.png
Con questa semplicissima modifica,andremo ad aggiungere le icone social,facebook,twitter ecc,con effetto di transizione,al passaggio del mouse cioe',le iconcine ruoteranno in un piacevolissimo effetto.
Autore:Tiger
Screen:
http://i.imgur.com/LhHuF.png
Demo:
Qui
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. 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;
}Codice: Seleziona tutto
<!-- Inizio Social-Effect by Tiger\www.bbcodeitalia.com -->
<div align="center" id="dec2">
<a rel="nofollow" href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/facebook.png" alt="*"></a> <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="*"> <a rel="nofollow" href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/yahoo.png" alt="*"></a> <a rel="nofollow" href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/rss.png" alt="*"></a> <a href="#">
</div>
<!-- Fine Social-Effect by Tiger\www.bbcodeitalia.com --> Codice: Seleziona tutto
<div align="center" id="dec2">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;
}http://i.imgur.com/0snjb.png
