!! We are offering existing members a one-time change in their usernames as a result of the site's adjustments. Please contact imToph for details. !!
!! Moderator and Graphic Designer Recruitment @ Announcements Board. !!

You are not connected. Please login or register

View previous topic View next topic Go down Message [Page 1 of 1]

1HTML Spinning icons on Wed Jul 06, 2011 1:21 am


imToph

avatar
Administrator

View Extended User Information

TUTORIAL: SPINNING ICONS

Please follow this steps to make those icons spin 360° Very Happy

First, make the list. A blank list is provided below as your guide.

Second, Go to Admin panel -> Display -> Homepage -> Homepage Generalities and put the HTML list and Save.

Code:
<ul class="spinicons">
  <li><a href="URL"><img src="IMAGE1 URL" /></a></li>
  <li><a href="URL"><img src="IMAGE2 URL" /></a></li>
  <li><a href="URL"><img src="IMAGE3 URL" /></a></li>
  <li><a href="URL"><img src="IMAGE4 URL" /></a></li>
  <li><a href="URL"><img src="IMAGE5 URL" /></a></li>
</ul>

Next, add this code to your CSS.
Go to Admin panel -> Display -> Colors -> CSS Stylesheet

Code:
ul.spinicons{
    list-style: none;
    margin:0px;
    padding:0px;
    position:fixed;
    left:0px;
    top:250px;
}
ul.spinicons li{
    padding-bottom:4px;
    padding-left:15px;
}
ul.spinicons li img{
    opacity:0.5;
    transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}
ul.spinicons li img:hover{
    opacity:1.9;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}
DEMO
Note: Copyright (c) 2011. No reproduction possible without the permission from One2 Studios.
http://one2studios.forum.st

View previous topic View next topic Back to top Message [Page 1 of 1]

Permissions in this forum: You cannot reply to topics in this forum




One2 Studios © 2011-2012
Designed and maintained by One2 studios.
Hosted by Forumotion | PunBB © | Report an Abuse