Tag Archives: jQuery

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.

jQuery 1.4 Released, Happy 4th Birthday jQuery

jQuery is one of the most popular JavaScript library which has made AJAX and dealing with DOM much more easier for developers. Over the years jQuery has quickly gone on to become one of the most used JS libraries.

jquery_logo

The jQuery team have released jQuery version 1.4 to developers to celebrate their 4th birthday today. jQuery comes with lots of new features and functions.

jQuery 1.4 Overview

  • Performance Overhaul of Popular Methods – jQuery developers have rewritten code for most of the earlier functions to provide with significant performance gains
  • East Setter Functions – jQuery 1.4 has added new and easy setter functions for all the objects
  • Improvements in Ajax – jQuery 1.4 introduces several significant updates to Ajax and JSON handling
  • In addition to this there are other significant changes to Attributes, Core, CSS, Effects, Events and more

Developers can find the new methods in jQuery by visiting this page. To download or learn more about jQuery 1.4 visit this page. jQuery 1.4 is also available as part of Google Ajax APIs.