jallysemail.com

Friday, January 21, 2011

Animation effects Italic - Rotate


This time I will discuss 'How to Create Animation Effects Italic' point here when the mouse is highlighted to the header then the header it moves to its normal position previously skewed. Tilt effect not only on the header only, but in all the widgets in your blog such as Picture and Writing. example you can see here ...


The trick is easy enough and the code that needs to be in rehab too cuman its CSS code only, namely by using CSS3 code, but there are drawbacks as well, because only the latest browsers that support CSS3.


Before we look at its CSS code, here I will give two (2) of the first oblique effect:





1. Leaning to the right effect:





2. Leaning to the left of the effect:


Description :

- Consider your existing numbers in brackets (... deg), it is a great Rotate, if the greater the number the more skewed .. Essentially that's it ..

Well, after we see its CSS code. right now to try it, ..

So this way, suppose my friend want to give effect to rotate tilt at the title post, we look first at the Postinganya code with code like the following :

.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
}

After the meet, you just insert the CSS code above in it before the closing tag }

So the result like this :

.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg) 
}

After the way we lalukan above, you try to Priview first, after changes are made, you just can SAVE TEMPLATE.


Nb : You can give this effect in the Title wedget / images posts also


0 comments:

Post a Comment