Welcome to the Alb Forum! Smile

You are not connected. Please login or register

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

1 Spin those Icons with CSS3 on Sat Jun 25, 2011 1:04 pm

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

View Demo










View user profile http://albforum.forumotion.net

2 Re: Spin those Icons with CSS3 on Fri Jul 15, 2011 11:45 am

Nice effect, thanks maki !Smile

View user profile

3 Re: Spin those Icons with CSS3 on Thu Jan 05, 2012 8:45 am

yeah nice!

View user profile

Sponsored content


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

 

Free forum | © PunBB | Free forum support | Contact | Report an abuse | Forumotion.com