CSS3 offers new ways to decorate texts or images. One of them is rotating. Using CSS3 'transform' property, you are able to rotate anything including texts and images.
As of today, this property is implemented with or without prefixes on more than 85% of the browsers in use worldwide. IE supports 'transform' from version 10 without prefix and from version 9 with prefix: -ms-. You are pretty safe using it on the condition that you add vendors' prefixes. This post is an introduction to the CSS 'transform' property and how it can be used in a post.
But let's start with a very simple example. Let's rotate a single image. Here is an arrow:
How do I reverse this arrow while drafting a post on Blogger.com? It is actually simple:
1 - I insert the image in the post at the place I want it to be.
2 - I switch to the HTML view.
3 - I find the end of the 'img' HTML tag added by blogger during the insertion of the image. Here what blogger generated when I inserted the arrow above:
4 - I add the following expression just before '/>':
The CSS magic operates and here is what you get:
Here is the HTML code after insertion of the style:
Rotation is not limited to 180 degrees, you can use any positive or negative value. Here are more examples of rotations using the same image:
Try it now. Good luck.
As of today, this property is implemented with or without prefixes on more than 85% of the browsers in use worldwide. IE supports 'transform' from version 10 without prefix and from version 9 with prefix: -ms-. You are pretty safe using it on the condition that you add vendors' prefixes. This post is an introduction to the CSS 'transform' property and how it can be used in a post.
How To Rotate A Text Or An Image?
Here are a few examples of what you can do using 'transform' with short texts:
Blog and
Make
Money
On Line
Make
Money
On Line
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
ProBloggerTricks
But let's start with a very simple example. Let's rotate a single image. Here is an arrow:
How do I reverse this arrow while drafting a post on Blogger.com? It is actually simple:
1 - I insert the image in the post at the place I want it to be.
2 - I switch to the HTML view.
3 - I find the end of the 'img' HTML tag added by blogger during the insertion of the image. Here what blogger generated when I inserted the arrow above:
4 - I add the following expression just before '/>':
style="transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);"
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);"
The CSS magic operates and here is what you get:
Here is the HTML code after insertion of the style:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheyAaHGC2nJsjWfA0vZefPx5IFSXcOY3mWqgC1Tg3niGx0rcWJSqpCuR8grj3x2e1cr_DM6PTmYVjoui1_7MJdhzA0eg9MHCEEQTyklx8ULkXnYdCKlA2GwTYYmJKSHazpRWDlSiVEaIo/s1600/arrowtop-10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Arrow" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheyAaHGC2nJsjWfA0vZefPx5IFSXcOY3mWqgC1Tg3niGx0rcWJSqpCuR8grj3x2e1cr_DM6PTmYVjoui1_7MJdhzA0eg9MHCEEQTyklx8ULkXnYdCKlA2GwTYYmJKSHazpRWDlSiVEaIo/s1600/arrowtop-10.png" title="Arrow" style="-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);" /></a></div> Rotation is not limited to 180 degrees, you can use any positive or negative value. Here are more examples of rotations using the same image:
Try it now. Good luck.
Written by Unknown
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
0 comments:
Post a Comment