Skinnable icons with CSS3 gradients and background masks
CSS gradients and background masks, first introduced by webkit, offer some really cool possibilities for skinnable, easily scaled graphics. Obviously this can be achieved with canvas as well, but I just find creating a few friendly lines of CSS and knocking up an SVG mask graphic in Illustrator so much easier.
Skinnable, sizeable icons:
A demo is available, but obviously viewable in Safari 4 / webkit only. A simple example of a gradient menu is there as well. The SVG masks were made in Illustrator, using some alpha opacity on the comments mask. The gradients themselves are simple linear transitions, but obviously you can go mental with the color stops or radial gradients.
Skim support for all this, to be sure, but the good news is that Firefox is on its way to picking it up. Gradients have made it into the FF3.6 release although, like border-radius, its syntax is slightly different from webkit’s.