Thursday, 30 June 2011 11:49

Fancy Social Icons

Written by 
Rate this item
(1 Vote)

I have been playing a little bit with some cool css3 examples recently and will be listing some further little tricks you can incorporate in to your K2 templates. In fact, your not just limited to K2, but even Joomla or any other media comprising HTML and CSS.

In this example, I am going to apply an effect to the social media icons, which will cause them to spin 360 degrees when you hover over them.
This is simple and is cross browser compatible for FireFox 4/5, Opera 10.5+, Safari 3.1, Chrome, IE9 Tested!! Open up your k2.css file and search for .digg and you will find this section of css.

Existing Image Code

a.delicious {background-image: url(images/social/delicious_16.png);}
a.digg {background-image: url(images/social/digg_16.png);}
a.facebook {background-image: url(images/social/facebook_16.png);}
a.googlebuzz {background-image: url(images/social/googlebuzz_16.png);}
a.myspace {background-image: url(images/social/myspace_16.png);}
a.reddit {background-image: url(images/social/reddit_16.png);}
a.stumble {background-image: url(images/social/stumbleupon_16.png);}
a.technorati {background-image: url(images/social/technorati_16.png);}

Now we dont actually need to make any change to this code, just simply extend it a little. The following is the additional css code to add in, simply copy and past it below the a.technorati.

The New Code

/* Transitions */
a.delicious, a.digg, a.facebook, a.googlebuzz, a.myspace, a.reddit, a.stumble, a.technorati {
-moz-transition: all 0.4s ease-out; /* FF4+ */
-o-transition: all 0.4s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.4s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.4s ease-out; /* IE10? */
transition: all 0.4s ease-out; } /* On Hover Transform */
a.delicious:hover, a.digg:hover, a.facebook:hover, a.googlebuzz:hover, a.myspace:hover, a.reddit:hover,
a.stumble:hover, a.technorati:hover {
-moz-transform: rotate(360deg); /* FF3.5+ */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform: rotate(360deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(360deg); /* IE9 */
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
zoom: 1;}

Save your k2.css, upload it to your server and navigate to a relevant k2 page and then test.
All being well you should see your social icons rotate, just like on this page!!

How it Works

I wanted the transition to happen on the icon, so as they are all individual atags it was easy to just group them together to add the transition and the transform with its behavourial property :hover could also be extended with :active.

Looking at the transform code first, this is end position of where the icon to be and in this case we are spinning it around 360 degrees around the Z-axis which is the axis that extends away from the screen.

Without this transition, nothing is going to happen. Rotating by 360 degrees is going to make the icon spin ‘full circle’, back to the same position it started from but the browser recognises it as a separate position. By adding the transition property, we’re telling the browser to essentially animate between two points. The default starting point for the rotation is 0 degrees and the second point on hover is 360.

transition: transform 0.4s ease-out;

The first part of the transition is what property we want transitioned which of course is the transform. You can also define all or separate properties with commas. The 0.4s is the duration in seconds and the ease-out is the timing function.

If you only want to rotate the icons 180 degrees, then just change all the (360deg) to (180deg) or any other value you want.
For IE support, it works, but you will need to do some additional research and calculations to get the right matric values needed.You can check Microsoft or Wikipedia for some further information.

Read 61779 times Last modified on Friday, 01 July 2011 05:08