CSS Sprites

June 8th, 2009

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... if you don't want to imagine, here is an example:

Rounded rectangles with a non-repeating background

May 25th, 2009

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:

a rounded rectangle with a non repeating bg

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