These days, making Web pages for the latest browsers can be mighty satisfying. You can actually design your Web typography (using cascading stylesheets), control your layout (using CSS positioning), and, by manipulating the Document Object Model, you can even add interactivity to a page and have it change over time or respond to the actions of your audience. All these ingredients add up to one delicious interactive cake.
Now get ready for the frosting: image filters.
Visual filters are a familiar concept if you've ever used graphics programs: You take a raw image and tell the computer to put a little blur on it, or you might reverse some of your text or the image itself. To do such tricks for Web publishing, you bring every piece into your graphics program as a bitmap, apply the desired filters, and then publish it as a GIF or JPEG.
But creating images of text for the Web destroys the point of having them as text in the first place. Instead of your title being a nice chunk of text inside your HTML (file size approximately 15 bytes), you end up with a big-ass GIF file (file size approximately 15 KB) that slo-o-owly downloads, ticking away the seconds of your life that you could be using to invent the hilarious Internet banner ad that will bring your company to profitability.
But say you still need to have your title sport a blue drop-shadow and be surrounded by a red glow. Well, we all do.
Or you need to change an image after it has been downloaded to the client - say, to give it a motion blur as it choppily moves across the screen to accentuate its sense of motion. Fear not: CSS image filters are here (though for the time being, they only work with Microsoft Internet Explorer 4.0).
To illustrate the following CSS image filters, I've used an image of fellow 4.0 browsernaut Nadav. Notice how the same GIF of his face is changed to show each type of filter, and how the identical effect appears on some of his favorite sayings.
next page»
