CSS

CSS3 has been floating around out there for a while but it still hasn't gotten a foothold - which is unfortunate. One feature that will change the way you think about your CSS is support for massively more-powerful pseudo-classes. Currently we stylers are limited to :hover and in most cases :first-child & :last-childIf you regularly use jQuery or at least look through the docs you know that there are some other pretty powerful options that would make some of CSS sweater.

CSS sprites have been around just about as long as CSS has been around - they just haven't been called that. And recently they have matured into a more viable technique that can help speed up your site. So let's begin at the beginning... To explain CSS sprites I'm going to ask you to imagine a typical horizontal navbar...

Now imagine that when a user rolls over a nav item the background changes color. Simple, right? Just create one class for the normal state with one background image and one class for the hover state with another...

One problem I have come across on several occasions is creating a fixed-width rounded rectangle that, in addition to its rounded-ness, has a non-repeating backgrund image. Here is an example of what I'm talking about:

So lets start with the rounded rectangle part.  This is the typical html that I might use:

<div class="rect_wrap">

  <div class="rect_top"></div>