Transparency
1st edition — by Patrick McNeil — Nov. 14, 2007
The Design Element
The use of transparency in web design is a topic ripe with issues. Above all other things the technical limitations of "real" transparency are a huge limitation, and the day all browsers fully support alpha transparency in png's will be a happy one. Until then though, we do have several options. Ultimately though, using this style in a design is a common task, and there are some solutions which actually make it a non-issue.
One of the most common patterns from the samples below is putting a semi transparent nav bar at the bottom of a header image. Why is this? I have no idea. But one positive effect is that the navigation is pretty effectively merged with the header creating an overall mass instead of just another, and separate, layer beneath the photo. On other sites the subtle usage of semi transparent backgrounds helps to pull the background elements into the foreground and essentially unify the design.
From a technical standpoint I think the key to remember when dealing with designs that involve transparency is that typically you don't need it to really be transparent. That is to say that you can fake it. Why fuss with png transparency hacks when you can just make a sliced image that looks transparent. This has typically been my approach.
I know this is a rather small set of samples, I actually had lots more, but I sat on the list for so long that many of the sites moved on and changed. And I just wanted to post on a new topic...so here you go! As always, this will easily grow with future editions of the topic.
Sample Usage
