png masks

my blog: the skinny

One of the goals of my blog was to maximize control over the colors of separate sections. Each profile (work/personal/both) has its own unique base color which was decided on very early in the project. These colors are not prone to changes, but I still kept in mind that one day I might feel like changing them anyway. And when that day comes, I want to have as little hassle as possible.

enter the masks

The technique I'm going to describe is not new, nor did I invent it myself. Still, you hear little about it and it's a good concept, so repeating it once more might be good.

The idea is to apply a background color and a background image to an element. The background image is a mask, meaning it's an image that doesn't include the actual representation, but contains a cutout of the representation and leaves that part transparent. The other pixels in the mask image cover the background.

The background color below the image shines through the transparent bits and will "form" the image you want. The advantage is obvious, if you work like this you can simply change the background color property to get your image in a different color. In other words, css color control!

my blog: live example

You can see the technique in use on this blog, just take a look at the profile navigation (top right). The link tag is given a dimension the same size as the png mask used. It's also given a background-color, which will appear through the cutout of the mask. A class on the body tag decides the background-color of the active and hover element.

after sunshine comes rain

Of course, there are a couple of downsides to this technique (hadn't you guessed already?).

The most obvious problem is the lack of png support in IE6. There are fixes of course, but they rely on ActiveX support and they are quite dirty. If you can't handle that, there are two other options. Either fall back to a gif mask, which means you can't have alpha transparency ( is bad), or you can make the colored images anyway and insert them in your IE-specific stylesheet (a waste of time).

Another limitation is the fact that this technique works best with monochrome images (as the color is determined by a single css background color), and with simple shapes. Creating such a mask isn't all that easy, especially when you're just a guy who's glad to cut and crop when he needs to, so complex images are often out of scope.

One final limitation lies with the mask itself. The masking area needs to have the same color as your background as to blend in, so unless you have an easy to integrate pattern or a single flat background color, this technique won't be of much value to you.

conclusion

Again, there are lots of "ifs" and "buts" involved with this technique, but it does come in useful and I was happy enough to use it for my blog. The difficulty is in making a good mask, the rest is easy and gives you plenty of control.