Learn How To Rotate Text With CSS | CSS Trick
By on November 5th, 2010

I’d like to share something interesting that I learned some days back. I was going through an article on Learning jQuery and my eyes struck on the date of the post. I was quite impressed the way it was designed and presented. At first, I thought it was an image, but when I viewed the source, I realized that it was done with CSS. I was very eager to learn how it was done and I Googled for this particular trick and found Snook’s article, Text Rotation With CSS. It wasn’t that hard to learn and implement as I had thought of it. I experimented on this trick and learned quite a bit of it. I altered the coding to insert Techie-Buzz logo and here’s the end result:

Demo | Download Source

The Magical Code:

HTML Code:

<div class="logo_box">
     <span class="techie_sample">Techie</span>
     <span class="tblogo_sample"><img src="tb.png" /></span>
     <span class="buzz_sample">Buzz</span>
</div>

CSS Code:

/* Techie-Buzz.com - Text rotation exmaple */
.logo_box
{
float: left;
background-color: #fff;
border: 1px solid #000000;
color: #ffffff;
position: relative;
margin: 0 0 0 20px;
}
.logo_box .techie_sample
{
display: block;
text-align: center;
font-size: 30px;
line-height: 30px;
padding: 2px 0;
background-color: #000;
}
.logo_box .tblogo_sample
{
display: block;
padding: 2px 24px 2px 0;
}
.logo_box .buzz_sample
{
display: block;
color:#000;
writing-mode: tb-rl;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
position: absolute;
right: 0;
bottom: 9px;
font-size: 24px;
}
*:first-child+html .logo_box .buzz_sample { right: -28px; } /* IE7 positions element differently to IE6 & 8 */
.logo_box span:nth-child(3)
{
right: -16px;
bottom: 24px;
}

Pretty simple, isn’t it? Download the source code.

P.S. Though this trick is a little old, I thought it would be great sharing it with you. Hope you liked it.

Tags: , , ,
Author: Joel Fernandes Google Profile for Joel Fernandes
Joel Fernandes (G+) is a tech enthusiast and a social media blogger. During his leisure time, he enjoys taking photographs, and photography is one of his most loved hobbies. You can find some of his photos on Flickr. He does a little of web coding, and maintains a tech blog of his own - Techo Latte. Joel is currently pursuing his Masters in Computer Application from Bangalore, India. You can get in touch with him on Twitter - @joelfernandes, or visit his Facebook Profile for more information.

Joel Fernandes has written and can be contacted at joel@techie-buzz.com.
  • http://www.theraisak.com Theraisa K

    How do you set the size of the box (div) the rotated text appears in? For example, I want to put a line of text along the left edge of my page, but the text seems to wrap at 14-16 characters (creating a box) and I want it to continue on (to make one long line of text). Is there away to force the text so it doesn’t wrap?

 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN