How to Overcome Web Transparency Browser Limitations

Friday, 23 January 2009 07:17

There are different types of inherent limitations with creating transparency for web-sites. Currently, if you’re going to work with PNG graphics, you’ll need to harness IE6, which has poor support for alpha transparency. This means working with IE specific code, or scripting-based solutions.

It’s important to know most common ways to overcome browser limitations. There are plenty of articles across the Web that review these issues. There are two articles below that describe Conditional Comments and a script-based solution. First though, review Jeff Croft’s article on creative use of transparent graphics, as it’s an excellent introduction to this topic.

Jeff Croft wrote an excellent article on the topic of using PNG graphics creatively called Creative Use of PNG Transparency in Web Design. This is the article to get started with on this subject. It covers the file formats and issues and then discusses creative transparency effects for images. It gives advice for watermarking images with PNG’s, utilizing reversed transparent backgrounds, and other use of transparent PNG images.
In some situations utilizing specific IE filters to display Alpha Transparency in IE6 is needed. The technique is limited, quirky, and can slow load times, but is still helpful in some situations. Review the article PNG Transparency for Internet Explorer (IE6 and Beyond) for an explanation of how to implement this solution.
Drew McLellan wrote an elegant script-based solution for dealing with the lack of PNG support in IE6. It was released as part of last year’s 24 Ways project and is called Transparent PNGs in Internet Explorer 6. You may also find script-based solutions available as plug-ins for your favorite CMS or in your Javasript library of choice.

about me

My name is Syamsul Arifin, I'm a graphics designer from Surabaya, Indonesia with over 2 years industry experience and this is my personal website showcases some of the work that I have created. I can render any kind of approach to design - minimal to maximal, bright to dark, clean to grungy... and can translate my designs into HTML/XHTML/CSS. I am also a Flash enthusiast.