Smashing Magazine we smash you with the information that will make your life easier. really.

Getting Creative With Transparency in Web Design

By Smashing Editorial, April 16th, 2008 in How-To | 99 Comments | Forum

by Sean Hodge

Arm yourself with the knowledge of how different file types of images can be used to achieve transparency on web-pages. It’s important to first understand these basics. Then learn how to push the limitations of browser support. Take a look at what others are doing with transparency on the Web; only then you’ll be able to learn how to get creative with transparency in Web design.

There are well-established methods of imitating Web transparency that have been developed to overcome browser support issues. While we can appreciate past solutions, it’s important to break out of this faux methodology and learn to work with PNG graphics. We are at a tipping point where IE7 continues to grab market share. And fortunately, IE7 has thet support for full Alpha Transparent PNG graphics. In the near future, transparent PNG graphics will have excellent browser support.

Ultimately, it’s necessary to consider creative uses for transparency on the Web. This article reviews the use of faux transparency methods, presents examples of transparent images on both fixed and dynamic backgrounds, and points to creative solutions that take full creative advantage of today’s modern Web transparency effects.

1. Learn How to Overcome Web Transparency Browser Limitations

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.

2. Faux Transparency on the Web

Faux transparency involves using images that imitate transparency with visual transparency effects. Such images can be created using applications such as Adobe Photoshop. Notice that the images used in faux solutions have no transparency data encoded, but are rather solid images that are designed to look transparent.

After creating a transparent design, you then prepare the graphics and Save for Web. You export solid graphics and use those when you code up the Website. The result looks just as transparent to end users. It’s a common solution used to sidestep issues of poor browser support for encoded transparent PNG image files. It requires no browser hacks for IE6 and no additional Javascript.

Of course, these solutions are not elegant in all situations. Take the case of horizontal navigation within site headers. There is a quick and common solution; you create faux transparency for each list item of the horizontal navigation. You do this by placing the background images of the horizontal navigation items absolutely to match the header background pattern.

In the case below, both the height and width are constrained on the list elements. With this type of solution you lose the ability for the design to enclose text as it gets resized. The background elements are fixed in place. Invariably, you will make some usability sacrifices when using this type of solution. Click on the photo below to view the web-site.

3. Transparent PNG Background Solutions

After reviewing Web transparency, you’ll find out that there are strong reasons to move to PNG graphics for layout designs. They have full Alpha Transparency ability and a wide spectrum of colors. They optimize better than GIF files. However, it’s important to notice that browser support has traditionally held back the use of transparent PNG graphics.

With IE7 having full PNG support, many designers have started adopting the use of PNG graphics into their workflow. To cater to the dwindling IE6 user market Javascript-based solutions can resolve poor PNG support in that browser, or Conditional Comments can be used to fix small case scenarios. Below is one web-site that is currently using PNG graphics for its column backgrounds and is using Conditional Comments to target support in IE6.

4. Flexible Width Transparency

If you’d decide to place transparent images on an opposite end of the browser window, images could overlap when the window is resized. You could use the flexible width transparency technique to create an interesting effect. The Risington Podcast uses a similar effect in its footer.

Another technique is explained in this article In the Lab: Doing strange things to CSS Backgrounds. The solution is to creatively use varying percentages for background image placement. The background appears to move when the browser window is resized. Or for a more polished example that uses a similar technique view this article How to recreate Silverback’s Parallax.

5. Pushing the Boundaries

Scripting technologies like Ajax and Javascript open up ways to creatively use transparency in Web design. Creating draggable elements is an excellent opportunity to use transparent graphics that will overlay the page design.

The example below, Raduceuca.com, has an interesting ability to drag the search around the browser window. While being not the most useful application of this technique, it is an interesting experiment, and a funny little feature for users to play with. It’s not implemented perfectly in IE6, see first image below. As you can see in the second images, it works great in IE7. Clearly, the designer decided to offer limited support to IE6.

When dealing with older browsers it’s important to have a strategy in place that is in line with the actual traffic those browsers receive. Depending on the numbers, older browser based solutions could be given limited support; Or, as in the case of really old browsers, no support at all. Make sure you have a plan first, though.

Conclusion

Consider switching over to PNG format images for designing web layouts. Find new creative ways to use transparent images in your designs. Experiment with different uses for this technology. Develop a strategy for dealing with IE6, but ultimately look toward the future.

Sean Hodge is the creative mind behind AiBURN.com, a weblog about design, creativity, inspiration and graphics.

Published in How-To, April 16th, 2008
Tags: coding, creative, ideas, PNG, solutions, transparency

1.

Shaun (April 16th, 2008, 8:59 am)

Once again, a very informative article. Thanks Smashing Magazine :D
2.

Sean (April 16th, 2008, 9:01 am)

Link in part one is broken for 49abcnews, should be /web_standards not /Web_…
Love it!
3.

alvarocker (April 16th, 2008, 9:03 am)

I’m working with full png bgs in my newest designs, they are beautiful

Thanks for the post
4.

Nitin Garg (April 16th, 2008, 9:18 am)

great article, today with more power featured Browsers coming up, transpareny is one thing which can be used very powerfully.
5.

Anthony (April 16th, 2008, 9:30 am)

I’m not too keen on relying on javascript to create transparency since so many people/companies (at least a majority of the ones I’ve worked with) have it disabled. There’s an alternative, use .htc behaviors instead. You can see it in action and get the details at Link [webfx.eae.net]
6.

TuanAnh (April 16th, 2008, 9:33 am)

Great article!
7.

Radu Ceuca (April 16th, 2008, 9:37 am)

Thanks for the feature, I did not pay too much attention to IE6 users, I admit I was kind of lazy, there are better solutions to my transparency problem. :)
8.

Lisa (April 16th, 2008, 10:09 am)

Some of these examples I have seen before on Smashingmagazine.com

I don’t know about creativity, but another website that uses Transparency is Link [www.modeblog.nl]
9.

Tunrek (April 16th, 2008, 10:13 am)

Another interesting use of transparency on draggable and resizable “notes”: Link [www.notemag.net]
10.

Hamish M (April 16th, 2008, 10:22 am)

Great article! — I made use of a lot of CSS opacity and transparent PNGs in my newest design: Link [hami.sh]. The end effect is the ability to swap out any BG color and change the look of the whole page.
11.

Ryan Parker (April 16th, 2008, 10:38 am)

Wow! I absolutely love your posts. I visit your site everyday. Kudos :)
12.

liam (April 16th, 2008, 10:55 am)

Nice article Sean, some very useful references also. Cheers.
13.

Amanda Fazani (April 16th, 2008, 11:12 am)

I’ve been using this really useful script to enable PNG transparency in background and foreground images when viewed in IE6: Link [www.naterkane.com]

So far this has worked a treat in my own designs, so I hope this will be helpful to others too :)
14.

Lucifix (April 16th, 2008, 11:25 am)

First link is not working, this is the right one:
Link [www.digital-web.com]

Cool article BTW ;)
15.

VTFootballGrad (April 16th, 2008, 11:52 am)

I use BigstringIM to make my IM’s 100% transparent after a certain time period. Well to be honest the message self-destructs, but it doesn’t get any more transparent then that.
16.

Kevin (April 16th, 2008, 11:53 am)

Try searching for the iepngfix.htc file. Just add img {behavior:url(iepngfix.htc); } to a stylesheet included with conditional HTML so that IE5-6 see it. It’ll fix pngs with normal img tags, but it might muck up your layout if you try to use it to fix divs with PNG backgrounds.

Some javascript at Link [allinthehead.com] fixed the png background images on my divs without mucking up the layout so much, but it still affected it–my container won’t automatically expand in ie6 anymore :(

I used transparent PNGs to create a cool effect on one of my client’s websites– Link [scorewriter.net] =]
17.

Ty (tzmedia) (April 16th, 2008, 12:11 pm)

You guys are right on the money… just today I was in a heated discussion regarding transparency issues w/ IE6 is it worth the effort, if it’s not a client site. Just serve up a PNG and be selective of the background color, minus the alpha channel, IE6 users will just see the background color, I don’t have a problem with that easy work around if it doesn’t obscure anything else in the layout.

I’ll be studying your mondo list meanwhile, thanks heaps!!
18.

Alex Buga (April 16th, 2008, 12:11 pm)

I’ve seen a beautifull example of transparent png dragging on a website in the header area

They had something like “Close to clients” and you could actually drag the clients closer to the it guy but in a very creative way. Se masking was involved there.
19.

William (April 16th, 2008, 12:50 pm)

Heres a really cool example of a transparent .png header. Link [www.wingsus.com]
20.

Yves (April 16th, 2008, 2:01 pm)

Great article !
I’m actually working on a javascript library dedicated to handle with PNG32 formats on IE.
Link [png-hack.googlecode.com]

I hope to release the beta 5 this week :)
21.

Tephlon (April 16th, 2008, 2:15 pm)

@Lisa: Though pretty, Modeblog fakes the transparency. In Firefox, just right-click on the girl and choose “View background image” to see it.
22.

Herr Henning (April 16th, 2008, 2:39 pm)

Hi! Nice examples!
We’re using a lot transparency in our Wordpress theme for the atomtigerblog. I find it very nice and it has some nifty features - I wish next time we’re on the list too ;)
Take a look here if you want to take a peek: Link [www.atomtigerblog.de]
23.

John Faulds (April 16th, 2008, 3:36 pm)

You can actually get around a lot of PNG transparency issues in IE6 by using alpha transparent 8-bit PNGs. The edges of the images aren’t quite as smooth as they are in other browsers, but it’s an acceptable trade-off when you consider the alternatives required to get 32-bit PNGs to work correctly and that these workarounds sometimes produce unwanted side effects in IE6.
24.

Jason (April 16th, 2008, 5:21 pm)

I like the use of transparent PNGs but one thing to keep in mind is the increased file size for PNG’s, so don’t go overboard.
25.

Eureka (April 16th, 2008, 6:34 pm)

good!
26.

Jayphen (April 16th, 2008, 7:53 pm)

Another very good example of why IE6 is a bane on web designers’ existences.
27.

imsraaia (April 16th, 2008, 8:02 pm)

very informative… gr8 work…
28.

Permana Jayanta (April 16th, 2008, 11:49 pm)

Well, i always using png image format. This information is very useful to me. And , …. I wish no more people using browser that did not support alpha-transparency :D
29.

gr8pixel (April 16th, 2008, 11:59 pm)

Hi guys thanks for the article event though it is a very popular topic among all of us… :)
I just wanted to know.. is there any way to use a repeating background pattern that works with any of these IEPNG Fixing methods? (ok.. that means I don’t want to use a large transparent png pattern as my background.) I would really appreciate if any of you can help me with this matter.
thanks! \m/
30.

Mithun P Sreedharan (April 17th, 2008, 12:44 am)

Great Great article…
31.

amahony (April 17th, 2008, 12:51 am)

We just launched a MMO community portal with rich use of png transparency and overlapping transparent layers. Link [www.aeon-knights.com]
32.

George Nigh (April 17th, 2008, 1:41 am)

ie6 is the worst browser ever. Help fight with this evil
33.

mobobo (April 17th, 2008, 5:22 am)

you can get png24’s working in IE5.5 as well vai the bally clever chap over at youngpup.net
Link [youngpup.net]
34.

Ryan (April 17th, 2008, 5:53 am)

Worthless article. This topic has been covered multiple times (as you demonstrated by linking out to the other sites). Please try to be original with your posts.
35.

flko (April 17th, 2008, 6:14 am)

buenisimooo!!!!
Link [www.quintohache.com]
36.

Lara (April 17th, 2008, 7:05 am)

Do you guys have a camera in my office?? How do you know exactly what I want to know at exactly the right time?

This might be a better question for them directly, and it might be ignorant (I’m NOT a graphics person in any sense), but how in the world does the Rissington Podcast get those beautiful images to be so small, filesize-wise?
37.

Zh (April 17th, 2008, 7:20 am)

Yeah, cool. Very good technicks are used here: Link [beloded.net]
38.

fas (April 17th, 2008, 7:22 am)

cool article
39.

Lukas Rieder (April 17th, 2008, 8:49 am)

Personally, I try to avoid PNG transparency whenever it’s possible.
Clients want their websites to work in ALL browsers, and in the past I had no good experience with IE6 limitations. I try to avoid PNG not only for the reason they don’t work cross browser, I could manage to make them work in IE6 or just use GIF’s for IE6… but this means I have to use more time for the production process.

I think its very important to think your way around problems - the ability to create amazing designs with transparency effects without using PNG’s. Whenever a transparency effect is required I try to work around the use of PNG’s, and it clearly works in most cases. Technically you can’t call them transparency effects, just color effects… BUT the judging eye doesn’t care.

Have a nice day, thanks for sharing!

lukas from Link []
40.

Benji (April 17th, 2008, 10:12 am)

You forgot
41.

Uwe (April 17th, 2008, 10:58 pm)

Yes transparency is the hit, and it´s looking very nice @ modern sites. But i think Firefox is much faster with transparency than the I.E. Link [www.speedfanshop.com]
42.

Shane (April 17th, 2008, 11:28 pm)

Interesting article with some useful information. I think many of my clients would benefit from the types of designs possible with PNG support, and although there is some limited browser support, this is definitely changing, and with a fix for IE6, I think the majority of users won’t have an issue.
43.

mmhan (April 18th, 2008, 8:04 am)

Yet another great article.

Can you guys do me a favor and develop a tiny little program that will add every new post to my bookmark folder? :-)
44.

Braintrove.com (April 18th, 2008, 8:32 am)

Great!
45.

Sandeep Sharma (April 18th, 2008, 9:56 pm)

Great article…
46.

wdu.net (April 21st, 2008, 10:42 am)

I also try to use PNG as much as possible.

Great examples

Thanks for a great post!
47.

arthur (April 22nd, 2008, 5:58 pm)

Link [www.horizonteazul.com.br] my transparent web site i’ve made. take a look.
48.

Jason Marsh - Website Designer (April 29th, 2008, 12:09 am)

Great to hear that browsers are looking more at supporting transparencies, it’s about time. This will definitely change the way we design websites and ad a different functionality to our sites.
49.

Adam Duro (June 16th, 2008, 9:08 am)

I agree with what Jason and a few other posted. PNG’s are great and all, but they are not practical for widespread use on a website. I use them, though sparingly.

They make a huge impact on the file size of a website. They can sometimes be 2 or 3 times the file size of an equivalent jpeg or gif. All efforts to compress them with things like PNG Crush, etc. do not make enough of an impact to reduce their size enough to maintain a fast loading site.

Sure they are the only way to get certain designs to look pixel perfect to a designers PSD, but sometimes the reigns have to be clamped down on designers to layout sites that do not require extensive PNG use.

Not only that, but the IE6 hacks that are out there do not cover all use case scenarios. You run into problems when you try and use PNG’s for :hover state background images. I’m sure you could get it going with a hack or two, but finding the right hack has slowed me down quite a bit when trying to get a site cross browser.

Let’s face it people. IE6 is still being used by our clients. If the client can’t see the site the way we want ‘em to, we look like fools.

I too look forward to the days when IE6 goes the way of IE5.5.

Cheers.
50.

Brian Barrett (June 27th, 2008, 11:21 am)

If you’re looking for a good way to auto-generate transparent PNG graphics for use as tabbed navigation, I’ve created a an overview of this technique on my site. Link [www.brianbarrett.net].
51.

TRo (September 9th, 2008, 1:32 pm)

Great article…

Link [www.sanal-arsiv.com]
52.

Liam Vickery (November 2nd, 2008, 7:12 am)

Check out the transparent container here :

It is a 1×1 pixel opaque blue tile, on repeat for the background image.
50 or 60% opacity, you can see through to the background picture, but it tints the container a nice darker blue so you can read the text.

As far as .PNG sizes, the best software I have used for file size and compression is Irfanview, with pngout plugin selected in save options.

MUCH smaller file sizes generated than phtotshop ’save for web’ option.

Does multi-pass compression, over and over about ten times till the file is as small as possible.

Each format has different qualities - .png is the superior format, but still IE6 and stuff around, so ugly .gifs with no anti-aliasing are still around… The file size is always an issue obviously.
I just optimise each image to best format for the size.

I don’t even understand why people say “never use this or that, I only use this etc.” Why limit yourself? U just use what works 4 u I guess.

Paint.net is a great free editing tool that saves in different formats, for those without photoshop.
I could get by just fine with paint.net and irfanview if I had to.

Liam.
53.

zulsdesign (January 8th, 2009, 8:10 pm)

this is my latest work Link [fauzan.dhezign.com]

many PNG image is this design :0
54.

Guilherme (January 15th, 2009, 3:49 pm)

Has anybody seen the code on The Risington Podcast? Theres an b element which class (or id, i can’t remember) is ’semantics-my-arse’.

Hahahahahah, great design. Not so great coding.
55.

CobaltCow (January 19th, 2009, 10:17 am)

I used semi-transparent PNG’s in this layout to great effect.

Link [staging.hillendlodge.com.au]
Note: Site isn’t live yet, so the content isn’t complete
56.

dinesh singh rawat (January 21st, 2009, 12:32 am)

loved it :)