Transparency in web design has been held back by IE6′s inability to display transparency in PNG files. Now that there are workarounds using javascript and the increasing lack of support for the aging browser transparency has become a viable option in web design.
All of the examples below make use of transparent PNGs.
Envato
Line25
Sam Brown
Inspiration in a Box
Postbox
Holdfire
eleven3
West City Hotel
Evodence
Moradito
Brad Colbow
Housing Works
Lilly’s Table
Mateus Neves
Whitespace
Freestyle BMX
Christine Galvin Design
Aurelien Reaut
Respiro Media
Silverback
Aislinn
Design Attik
Avalonstar
Matt Zeilinger
Beak
Bara’ Design
Marmalade on Toast
Russ Kirby
Vitra Direct
HelloThemes
Piz’za-za
CSS Leak
Carbonmade
Mint
Perishable Press
Core
Tweet






































Very nice selection ..
Check out this site ..
http://www.newyorkpalace.com/
Very nice effect with the transparant navigation.
The problem with that site Steen, is that it is almost entirely built using Flash and I see know reason why it should be. Seems unnecessary to me.
Agree 100% don’t like Flash sites – but some of the transparancy effects are quite nice.
From a technical and SEO standpoint Flash sites is far from ideal.
Beautiful..spotlight on these sites!
Nice list, but HUGE oversight missing out youlove.us from this collection!
The Holdfire website mentioned here uses a theme purchased online available here: http://themeforest.net/item/griminati-business-website-layout/32173
No disrespect meant towards Holdfire or the author of this blog post, but it’s always nice to have credit go where it’s due. Thanks for sharing these fantastic designs.
WoW article.
Thanks for pointing that out Eric, I was unaware of that.
I’ve used similar effects on my website: http://burningcliff.com.
Excellent round up.
Really nice list!
It’s great to see transparency effects on the rise (when used well). I’ve enjoyed using it in some of my recent projects as well.
I’m pleased that we can finally move on from being held back because of IE’s inability to use PNG files (without JS)
However, in an ideal world. IE6 wouldn’t be used at all
Thanks for the sharing these sites.
The list is not complete without this one: http://www.artishockdesign.nl/
Here’s another, hand drawn style with *lots* of overlaying alpha pngs
http://www.limpfish.com
I’ll shamelessly add this one to the list:
http://factory-interactive.com
Nice list. I like this post. Inspired gallery…
Hi Tom
Thanks for the collection. It’s certainly an effective technique for a good look in web design and will be great to see when more browsers allow us to implement CSS based solutions.
In the meantime here’s a nice link for those wishing to use PNGs and not have to worry about the dreaded IE6
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Hi Tom, thanks very much for featuring our site http://www.marmaladeontoast.co.uk
Anyone calling it ‘brilliant’ is very much appreciated!!!
vovv supper designs
thanks for featuring our westcity hotel website
i like these kind of designs
http://nob.fi/ uses a simple, subtle transparency effect to keep their gorgeously large background photos from completely disappearing in the sub pages. I like it.
Hi guys,
check out the dynamism and transparency effects used here:
http://ceramicca.pl
I love the background illumination!