PNG Headers
My good friend and general brilliant guy (he really is) Nick Chapman clued me in on a layout technique that I think is revolutionary. To his credit he did try to get me sold on the idea a while back, for use with my old template (example), but I would have had to forgo the part of the header graphic that creeps into the content area in order to support Win/IE. Although in retrospect it's such a cool technique I should have jumped ship back then.
The technique is fairly straight forward. You layer 2 images on top of each other. The top image is a PNG with an alpha-channel that makes some areas transparent and other not transparent. The bottom image is a plain JPEG or GIF that shows through the transparent parts of the overlaying PNG file. The implication is that you can design a header for a website template (for example) that is attractive and orderly but still allows novice users/bloggers to personalize their site in a meaningful way. Upload a new image to a site and change one URL in that sites CSS and you can change the content of the banner.
The technique might be straightforward but getting it to work with Win/IE is not. Nick put together a great tutorial that explains the process.
In the future Nick promises to put together another tutorial that will show you how to combine this technique with a little JavaScript to created headers the rotate on reloads while also overlaying descriptive text, like in this example.