Home > design > easy and simple transparency effect using GIF

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.

transparant gif exampleHowever, 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.

transparency examples

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.

The biggest advantage however is that you don’t need any fancy CSS or javascript or PNG, which in certain specific cases can be a big plus.  It’s more of a hack on your eyes/brain then on the browser :)

Categories: design Tags: , , , ,
  1. PS
    August 15th, 2010 at 12:07 | #1

    You might want to read this: http://en.wikipedia.org/wiki/Dithering#Digital_photography_and_image_processing

    One downside of this technique is that such an image will produce a displeasing flickering effect when dragged over itself. You can try it out yourself in firefox: Load the page, then drag the image somewhere.
    So when using this, you should at least disable drag & drop for the elements involved.

  1. No trackbacks yet.