Tutorial - Vertical Sexy Rotate Social Pages

Scris de **Zeus** Vin Iun 03, 2011 10:00 am

Tutorial - Vertical Sexy Rotate Social Pages

In acest tutorial am sa va arat la ce anume am muncit eu 3 ore !
Cu ajutorul noilor proprietati CSS3 si putina inspiratie am reusit sa dau unei liste de imagini un efect foarte frumos la hover(pozitionarea mouse-ului peste...)

Previzualizare:[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Daca va placut,haideti sa va arat cum se face !
Pentru a proba acest tutorial,creati o pagina HTML si introduceti acolo urmatoarele coduri:

1.Structura HTML:

Cod:: <div class="designART-sexy-rotate-social_pages-position"> <ul class="designART-sexy-rotate-social_pages-list"> <li> <a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/RSS.png" class="designART-sexy-rotate-social_pages" /></a> </li> <li> <a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Facebook.png" class="designART-sexy-rotate-social_pages" /></a> </li> <li> <a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Twitter.png" class="designART-sexy-rotate-social_pages" /></a> </li> <li> <a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Digg.png" class="designART-sexy-rotate-social_pages" /></a> </li> <li> <a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/delicious.png" class="designART-sexy-rotate-social_pages" /></a> </li> <li> <a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Youtube.png" class="designART-sexy-rotate-social_pages" /></a> </li> <li> <a href="#"><img src="http://cdn5.iconfinder.com/data/icons/broken_icon_pack/64/Flickr.png" class="designART-sexy-rotate-social_pages" /></a> </li> </ul> </div>

2.Codurile CSS

Cod:: <style> /* CSS creat de BODO - DesignART.forumhit.ro */ .designART-sexy-rotate-social_pages-position { position: fixed; left: -40px; top: 180px; } ul.designART-sexy-rotate-social_pages-list { list-style: none; } .designART-sexy-rotate-social_pages { padding: 5px; width: 32px; height : 32px; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; } .designART-sexy-rotate-social_pages:hover { margin: 0 0 0 5px; -webkit-transform:rotate(360deg) scale(1.5) translate(10px); -moz-transform:rotate(360deg) scale(1.5) translate(10px); -o-transform:rotate(360deg) scale(1.5) translate(10px); } /* SFARSIT CSS */ </style>

Sper ca va placut acest tutorial! Bafta !
***Daca intampinati probleme sau dificultati in realizarea acestui tutorial sa rugam sa postati in categoria [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Tutorial realizat de BODO | DesignART
***Important !
Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !