1 Spin those Icons with CSS3 Sat Jun 25, 2011 1:04 pm
Maki
To make those icons spinning, you must follow this tutorial.
Let’s start with the HTML. Which is nothing more than a list now we need to find 5 icons or more is really up to you on how many you want.
We need to go to A-CP => Display => Homepage => Generalities and put the HTML in the Homepage message & save.
The HTML
Here’s the CSS focusing only on the code that perform the transitions which is all we need for the purposes of this tutorial.
We need to go to A-CP => Display => Pictures and Colors => Colors >> CSS Stylesheet put the CSS in there and save.
The CSS
Let’s start with the HTML. Which is nothing more than a list now we need to find 5 icons or more is really up to you on how many you want.
We need to go to A-CP => Display => Homepage => Generalities and put the HTML in the Homepage message & save.
The HTML
- Code:
<ul class="socialicons">
<li><a href="#"><img src="IMAGE1" border="0"/></a></li>
<li><a href="#"><img src="IMAGE2" border="0"/></a></li>
<li><a href="#"><img src="IMAGE3" border="0"/></a></li>
<li><a href="#"><img src="IMAGE4" border="0"/></a></li>
<li><a href="#"><img src="IMAGE5" border="0"/></a></li>
</ul>
Here’s the CSS focusing only on the code that perform the transitions which is all we need for the purposes of this tutorial.
We need to go to A-CP => Display => Pictures and Colors => Colors >> CSS Stylesheet put the CSS in there and save.
The CSS
- Code:
ul.socialicons{
list-style: none;
margin:0px;
padding:0px;
position:fixed;
left:0px;
top:250px;
}
ul.socialicons li{
padding-bottom:4px;
padding-left:15px;
}
ul.socialicons 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.socialicons li img:hover{
opacity:1.9;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}