During my brief talk at SXSW Interactive, I mentioned that you could use color shades. Color shades are small PNG images filled with a black or white color set to a certain opacity which can be used for tinting background colors or images.
In this example, a color shade is placed in the background image of a heading that rests on top of a photo.
For another example, check out the CSS Cookbook site. There I use color shades to retain the gradient within the unordered lists that are placed in background of the design.
If I used the traditional slice-and-dice/Image Ready method for production, I would need to have different background image for each list item. With color shades, I simply use two images: one color shade and the background image.
A benefit of color shades is allowing site visitors to resize their fonts while maintaining the cohesive site design.
Another benefit is the as ease of site maintenance. I can easily throw in an extra list item if I need to without breaking a sweat or opening Photoshop.
Downloads
To save you time, I’ve created a set of color shades (~171 KB) that are free for downloading and use. I’ve included shades of both white and black with stops at every 10 percentage points. Also included are color shades set 33 and 66 percentages as well as the original Photoshop source file.
Note: you will still need to use a method for supporting PNGs in IE6, if you still want to support that browser.