Thursday, 30 June 2011 15:42

Adding on Hover Flares

This is something that I have done in subtle ways in various templates in the past, but on our new site, I have added some glow effects to some container images. After being asked how I did it, I thought I would show you how simple this is.

For a working example, check out our Templates page and hover over one of the images.
In the example, we have added some shadow to the image and a glow effect when you hover over the image.
Note, these images have a white border, which was added in the jpg file, but this can easily be done with css instead, we have done this elsewhere on the site.

For this example we modified the css for .itemIntroText img. In its normal state, we just have a small drop shadow and to do this, we used the following css:

.itemIntroText img {
-moz-box-shadow: 2px 2px 2px #bbb; /* FireFox */
-webkit-box-shadow: 2px 2px 2px #bbb; /* Safari / Chrome */
box-shadow: 2px 2px 2px #bbb; /* CSS */

To create the on hover effect, we created a class as follows:

 .itemIntroText img:hover	{
-moz-box-shadow: 0 0 20px #74869C, 0 0 60px #74869C; /* FireFox */
-webkit-box-shadow: 0 0 20px #74869C, 0 0 60px #74869C; /* Safari /Chrome */
box-shadow: 0 0 20px #74869C, 0 0 60px #74869C);} /* CSS */

If you want box shadows in IE, then you will need to use something like pie.htc so pop over to http://css3pie.com.

Published in K2Joom Blog
Thursday, 30 June 2011 11:49

Fancy Social Icons

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.

Published in K2Joom Blog