Disable resize
textarea {
  resize: none;
}

Vertical resize only
textarea {
  resize: vertical;
}

Horizontal resize only
textarea {
  resize: horizontal;
}

Check theses demo showing all possible options

First step is to create the form. I usually have all my forms inside a list:

UPDATE: It's necessary to turn off the "autocomplete" so the inputs don't get messed up.

markup
<form action="">
  <ul>
   <li>
    <label for="username">Username</label>
    <input id="username" type="text" autocomplete="off" />
   </li>
   <li>
    <label for="password">Password</label>
    <input id="password" type="password" autocomplete="off" />
   </li>
   <li>
    <input type="submit" value="login" />
   </li>
  </ul>
</form>

Don't forget the "for" attribute, the script will rely on it. Go ahead and add the following CSS:

CSS
form li { position: relative; }
label {
  position: absolute;
  top: 5px; // adjust as needed
  left: 5px;
}
//remove absolute position if the label comes after
//the input. Eg. a checkbox with a text next to it
input + label { position: static; }

Now the final touch. With some jQuery magic, lets make the label disappear on focus.

jQuery
//loop through all text inputs, password inputs and textarea
var inputs = $('input[type="text"], textarea, input[type="password"]');

// remove label on focus
inputs.focus(function(){
  $('label[for="'+$(this).attr('id')+'"]').hide();
});
inputs.blur(function(){
  var that = $(this);
  if (that.val() == ""){
    $('label[for="'+that.attr('id')+'"]').show();
  }
});
inputs.blur();

Demo

Let's start by creating the following markup:

Markup
<a href="http://www.example.com" class="tooltip">
 My Link 
 <span>Cool tooltip<small></small></span>
</a>

CSS
.tooltip { position: relative; }
.tooltip span {
  position: absolute;
  right: 0;
  top: -35px;
  display: none;
  min-width: 50px;
  padding: 3px 8px;
  white-space: nowrap;
  font-size: 11px;
  text-align: center;
  background-color: rgba(0,0,0,.8);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.tooltip span small {
  position: absolute;
  right: 10px;
  bottom: -6px;
  border-top: 6px solid rgba(0,0,0,.8);
  border-left: 6px solid transparent;
}
.tooltip:hover span { display: block; }

As I mentioned in a previous article, IE doesn't support RGBa. Adding the following styles, wrapped in a conditional comment, will make it work.

IE CSS
.tooltip span { background-color: #000; }
.tooltip span small { border-top: 6px solid #000; }
IE 6 Tooltip Arrow Fix
*html .tooltip span small { 
  border-left: 6px solid #363636; /* Match the color of the background */
} 

For more info about creating speech bubble using only CSS, go to DeSandro's tutorial on creating speech bubble.

Demo

My Link Cool Tooltip
Long Tip Test Very Long Tooltip Test Very Long Tooltip Test

Keith's Example using jQuery:
jQuery(function($) {
$('body').addClass('hasJS');
});

CSS
.hasJS .module {
display: none;
}

Why add a class if JavaScript is enabled?

Although the majority of desktop users have JavaScript enabled, mobile is one of the most used platforms to surf the web. Some mobile browsers don't support JavaScript. Keep in mind that search engines don't run JavaScript, so NEVER add important content using JavaScript.

My current project at work requires the content to be rendered for both enabled and disabled JavaScript browsers. I did a bit of research and found that most websites/solutions add the hasJS class to the body after the DOM is loaded. My first thought was, if the class gets added after the DOM is loaded, a shift on the page will occur providing a bad user experience. Yahoo was a site I researched and they have, IMHO, the cleverest solution of them all. They add the class to the HTML element instead of the BODY element. The first script block on the page to be loaded adds the hasJS class without dependency on libraries. Note: Yahoo uses another class name "jsenabled".

You might be asking why add the class to the HTML element? I think it makes more sense because the BODY is the beginning of the content. This means that everything after the body is "visible" to the user and blocking the content with a script tag isn't a good optimization practice. Here is the code to add the hasJS class to the body:

hasJS Script Block
<script type="text/javascript">
  document.getElementsByTagName('html')[0].className = 'hasJS';
</script>

NOTE: If you already have more classes on the HTML element, use document.getElementsByTagName('html')[0].className += ' hasJS'; instead.

CSS
-webkit-border-radius
-moz-border-radius

It's a tough decision to start dramatically forking the experience between IE and “the rest of the world.” But, before you get overly excited, note the border-radius has it's gotchas!

1. FF 3.0 doesn't support individual corners Corrected - thanks Brainlag

   Yep, I'd really recommend squaring the diminishing world of FF3.0 as well. By all means, ROUND EM IN FF3.0! This can be done by targeting FF3.0 and above with @media queries. This will require a constraint since @media partially worked in FF3.0. So, try @media (min-width: 1px;) { } corrected: @media screen { #myDiv { -moz-border-radius: 5px; } }

2. Background images spill out of rounded boxes in FF3.0

   I believe FF3.5 properly masks background images finally

3. Rounded corners in FF2.0 aren't anti-aliased

   This is probably not much of a problem given FF2.0's 3% market share.

These quirks are no cause for concern. In fact, I think you should leave FF3.0 and pre Safari 4.0 out of the rounding world by the fact that older browser FF and Safari users disappear faster than “a truckload of dead rats in a tampon factory!” - gratuitous, meaningless quote from Top Secret.

What do you guys think? Any major CSS Rounded Corner converts?

New Easy-Clearing
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Using conditional comments, let's add the proper code to handle IE 6 and IE 7 (IE8 supports the :after pseudo-elements; no extra code is necessary).

New Easy-Clearing for IE
/* IE6 */
* html .group { height: 1%; }

/*IE7 */
.group { min-height: 1px; }

I've been using the group class on my latest projects and I'd like to share a small tip, when clearing list items, with you.

Normally, we'd have the group class on every LI, like so:

Clearing List Items the Old Way
<ul class="comments">
  <li class="group">
    <img src="carla.jpg" alt="Carla&#x27;s Picture" />
    <p>Tiny and I miss you</p>
  </li>
  <li class="group">
    <img src="steven.jpg" alt="Steven&#x27;s Picture" />
    <p>I need a favor! It will take you 5 seconds.</p>
  </li>
  <li class="group">
    <img src="buzz.jpg" alt="Buzz&#x27;s Picture" />
    <p>I speak gibberish</p>
  </li>
</ul>

Although the markup doesn't look very bad, we can make things better by introducing a new class (groupList) and adding it to the UL.

Clearing List Items the New Way
<ul class="comments groupList">
  <li>
    <img src="carla.jpg" alt="Carla&#x27;s Picture" />
    <p>Tiny and I miss you</p>
  </li>
  <li>
    <img src="steven.jpg" alt="Steven&#x27;s Picture" />
    <p>I need a favor! It will take you 5 seconds.</p>
  </li>
  <li>
    <img src="buzz.jpg" alt="Buzz&#x27;s Picture" />
    <p>I speak gibberish</p>
  </li>
</ul>

Phew, the markup looks much cleaner! Now that we've fixed it, let's add the .groupList > li selector to the existing .group styles.

Extending .group
.groupList > li,
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Wait! How about the beloved IE?

Extending .group IE
/* IE6 */
* html .groupList li,
* html .group { height: 1%; }
* html .groupList li li { height: auto; } /* Resets nested LIs */

/*IE7 */
.group > li,
.group { min-height: 1px; }

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• Internet Explore 7 & 8
• Internet Explore 6

The most efficient way that I found to declare RGBa values is to separate the flat colors into code block, and keeping RGBa with the other styles. Like in this example:

CSS
/* NON RGBa BROWSERS
  ------------------------------------------------------ */
#wrap { background-color: #000; }
#footer,
#header { background-color: #ccc; }
.section { color: #fff; }

/* HEADER
  ------------------------------------------------------ */
#header { background-color: rgba(204,204,204,.8); }
#header ul { float: right; }
#header li {
  float: left;
  margin-left: 1em;
}
#header li:first-child { margin-left: 0; }

/* WRAP
  ------------------------------------------------------ */
#wrap {
  width: 960px;
  margin: 0 auto;
  background-color: (0,0,0,.7);
}
.section {
  padding: 1em;
  color: rgba(255,255,255,.9);
}

I always keep the flat colors separated because they can be easily removed when the other browsers start supporting RGBa. Why didn't I declare the HEX colors on the same line as the RGBa? Simple! IE doesn't support it; no color will be rendered at all. Note: Please be aware that the RGBa colors have to be the last ones declared.

DOESN'T WORK IN IE
/* HEADER
  ------------------------------------------------------ */
#header {
  background-color: #ccc;
  background-color: rgba(204,204,204,.8);
}

Last but not least, when I use border's shorthand syntax, I declare it with the flat colors first, and then border-color afterward. See the example bellow for better understanding.

CSS
/* NON RGBa BROWSERS
  ------------------------------------------------------ */
#header { border: 1px solid #000; }

/* HEADER
  ------------------------------------------------------ */
#header { border-color: rgba(0,0,0,.7); }

Browser Support

• Firefox 3.0+
• Safari 3.0+
• Chrome 1+
• Opera 10+

IE7 has a bug when using adjacent sibling selectors. If there is a comment between two elements, it will think that the comment is the next element. Here is the example:

CSS
p + p { background-color: #fc0; }

Markup with comment
<p>Paragraph #1</p>
<!-- my comment here -->
<p>Paragraph #2</p>

The image bellow shows how it supposed to look like in all modern browsers. Unfortunately, the only way to make it work in IE7 would be by removing the comment.

Markup without comment to make it work in IE7
<p>Paragraph #1</p>
<p>Paragraph #2</p>

Let's start of by adding the necessary markup to render the appropriate date format. Create a DIV element with a class of "entryDate" and three children SPANs with respective classes "postMoth", "postDay", and "postYear".
Add the PHP code to get the post date from the database as shown bellow. For more PHP date format go to http://us.php.net/date

Markup
<div class="entryDate">
   <span class="postMonth"><?php the_time('M') ?></span>
   <span class="postDay"><?php the_time('d') ?></span>
   <span class="postYear"><?php the_time('Y') ?></span>
</div>

Now let's add styles to make it look pretty.

First of all, set the body font-size to 10px or 62.5%. Then go ahead and set the DIV that wraps the post entry to position: relative so the date badge can be positioned relatively to it. Set margin-left to the width of the date badge plus the gap between the post entry. In this sample the margin-left is set to 4.8em.

Absolute position the entryDate and set the left to the same size as the its parent margin-left. After that, set the width to 3.5em. Next, set all the SPANs inside entryDate as block element (The reason why SPANs are being used instead of DIVs is because if the stylesheet is disabled, the date renders nicely in one line). Don't forget to centered align the text.

Change the appearance as needed, I have changed the size of the text to look more like a calendar and I've set its color to blue and white.

CSS
body { font-size: 62.5%; }
.post { 
    position: relative;
    margin-left: 4.8em;
}
.entryDate { 
    border: 1px solid #999; 
    font-family: Georgia,"Times New Roman", serif; 
    left: -4.8em; 
    line-height: 1; 
    position: absolute; 
    top: 0; 
    width: 3.5em;
}
.entryDate span { 
    display: block; 
    text-align: center; 
}
.postMonth { 
    text-transform: uppercase; 
    font-size: 1.2em;
    padding-top: 0.3em; 
}
.postDay { font-size: 2em; }
.postYear { 
    background-color: #2358B8; 
    color: #FFF; 
    font-size: 1.2em; 
    padding: 0.3em 0; 
    margin-top: 0.3em;
}

Don't forget to checkout the live demo

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• Internet Explore 7 & 8
• Internet Explore 6

Markup
<p class="drop">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

CSS
.drop:first-letter { 
    font-size: 4.2em;
    float: left;
    line-height: 0.6em;
    margin: 0.13em 0.13em 0.13em 0;
}

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• Internet Explore 7