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.