Your Customers are Mobile, you will be too …

In this tutorial we will cover how to rotate text using CCS3.This is a simple exercise designed to demonstrate how to use the transform:rotate CSS property and that unlike a lot of article floating around you can do angles other that 90, 180, 270 and 360(which would be pointless anyways). You can rotate text, images and other elements any direction and any angle you want.

Now while IE8 and down don’t have support for rotating things like text, IE9 does. And it does so without the annoying filters that we all hate. With the filters you could only apply one at a time to any given element, now IE9 has a -ms- propriety prefix like moz and webkit.

Bare in mind though even with this recent development don’t go overboard using this or any other CCS3 feature. The main problem with using this CSS property is not anything really technical it is do you really want text at a steep angle forcing your using to crane their necks trying to read it. Not really. This should only be used for small sections of text easily and quickly read by the user without them realising they read it without tilting their head.

We are going to create a little red spot special stick to attach to items to indicate they are on sale just like in a supermarket. Its short its sweet just says “50% off”. Because its so short people will read it, register what it says but they will do it so fast they won’t even realise they didn’t tilt their head. Also we are keeping the angle to further help with this.

Also by rotating text and not using an image that is already turned we can easily just change the text on the fly without having to run back to Photoshop all the time. And as it is not and image we are saving on HTTP requests as well as bandwidth, making our site load faster. Here is an image of what it will look like when finished:

Simple but effective. We will round off the corners, rotate the text, position it and bob’s your uncle. Done.

First off we need to create a class in CSS to handle all the formatting we are going to do to the “50% off” sticker. I called mine special you can call your anything you like. I started with giving it a font (Verdana) a font height of 18px, made it bold. So you give it your own typography. I then to make the text appear on 2 lines and have a perfect circle and to prevent text throwing the shape out I gave it a height and width of 50px and overflow:hidden; . We add a bit of padding around as the corners are going to come in a fair way on the box so I added 15px of padding right round and made the background red.

For positioning i floated it to the right and gave it a margin to the right and bottom so text didn’t get too close to it.

Code should look something like this at this stage before we go adding our effects to the text.

.special {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  width: 50px;
  height: 50px;
  background-color: #F00;
  padding: 15px;
  text-align: justify;
  font-weight: bold;
  text-transform: uppercase;
  float: right;
  overflow: hidden;
  margin-bottom: 10px;
  margin-left: 20px;
}

Now its time spice it up a little. First we will make the sticker round. We do that by simply putting a border radius of 100% on the element. If the element was rectangular we would end up with an oval shape from this property, however because we set height and width to 50px each we have a square which will give us a perfect circle. The code this including webkits looks like this:

-moz-border-radius:100%;
-webkit-border-radius:100%;
-o-border-radius:100%;
border-radius:100%;

So now we are at the last stage, rotating the text. We will do this with the transform:rotate property of CSS3. Most browsers do not support this in its intended format so we need to use webkits etc. I have chosen to turn mine 10degrees  so my code looks like this:

-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform:rotate(10deg);

Notice the inclusion of the -ms- prefix. This is for IE9 and is pretty new. IE9 will rotate your text but other IE versions will display the text normally without the rotation which in this case isn’t a real big loss as its only 10 degrees.

Your finished code should look something like this:

 

.special {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  width: 50px;
  height: 50px;
  background-color: #F00;
  padding: 15px;
  text-align: justify;
  font-weight: bold;
  text-transform: uppercase;
  float: right;
  overflow: hidden;
  margin-bottom: 10px;
  margin-left: 20px;
  -moz-border-radius:100%;
  -webkit-border-radius:100%;
  -o-border-radius:100%;
  border-radius:100%;
  -moz-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform:rotate(10deg)
}

And there you have it, Hope you have enjoyed this little tutorial.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: