Closed (sort of)

TEOM as you know it has been closed. I will keep it up for reference but it no longer will receive tutorial updates.

There are plans for a completely new site. If you'd like to be notified once the other site is up, simply subscribe to my mailing list.

Thanks for the support throughout all these years :)

XHTML + CSS

Semi-transparent divs

For Internet Explorer one could easily use opacity by simply using this small piece of code:

However, proprietary code such as the above doesn’t validate according to the W3C standards, not to mention that IE is a piece of junk, so one shouldn’t be coding based on it anyway.
So what can one do in order to make a valid page and still use opacity?

The answer is quite simple: transparent GIFs.

The great thing about GIFs is that they are simple to create, work on all browsers and, most important, the file size is quite small.

To make the GIF simply open your image editor, create a 2 × 2 pixels canvas and with a 1px square brush create the following pattern:


zoom in

Note: only one of the colors will be visible, so choose it carefully.

Set the GIF transparency to one of the colors (in my case it will be white) and save it.

Now all you have to do is set it up as your div’s background.

But, wait! There’s more!

What if you want to make a transparent photo?

In this case, create the same pattern as before but using only one color and leaving the other two pixels transparent (you’ll have to work on a layer to do so).
Then open you your photo, add a new layer and fill it with the pattern.
Select either the transparent or colored pixels (you can select them all by first selecting one pixel and then using a selection filter such as Select Similar).
Go back to the photo layer and fill the selection with a color that can be set for transparency (such as very bright green).
Save this image as a transparent GIF and set it as your background.

What about transparent PNGs?

PNGs can also be used for creating this effect.
However, you can only use single color transparency (which works the same way as the GIF).
If you try to use alpha channel transparency, you will have the same browser problems that you would if you used the filter property, since it isn’t supported by older browsers nor Internet Explorer.

· Jul 21, 2004 ·