easy and simple transparency effect using GIF
Transparency in HTML/CSS is largely an already solved problem, recent browsers all seem to handle PNG transparency pretty well and there are scripts that will make sure older browsers will handle them as well.
However, I wanted to make a post about a little technique I rarely see used which I think is quite genius in it’s simplicity. Whenever you want to create a semi-transparent surface you create a gif file that contains a simple pattern of transparent and opaque pixels; as in the example on the right. The white you see in the chequered image is of course transparent.
So let’s demonstrate how this effect actually looks.
Now as you can see the effect itself is very specific, and different backgrounds have different outcomes for the effect. Which might not fit every design. Another disadvantage is that it can only be used to show a 50% transparency effect. There might be pixel patterns that will give you a different distribution but I’ve never seen them.