Learn How To Rotate Text With CSS | CSS Trick

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.

Published by

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.

  • 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?