Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Getting Creative With Transparency in Web Design

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 Link

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 article1 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 Design2. 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.

    Jeff Croft3

  • 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)4 for an explanation of how to implement this solution.

    IE6 Beyond5

  • 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 66. You may also find script-based solutions available as plug-ins for your favorite CMS or in your Javasript library of choice.

    24 Ways IE67

2. Faux Transparency on the Web Link

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.

Pil Fake8

3. Transparent PNG Background Solutions Link

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.

Transparent Background Solutions9

4. Flexible Width Transparency Link

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 Podcast10 uses a similar effect in its footer.

The Risington Podcast11

Another technique is explained in this article In the Lab: Doing strange things to CSS Backgrounds12. 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 Parallax13.

Silverback14

5. Pushing the Boundaries Link

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.com15, 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.

Pushing Boundaries16

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 Link

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.

Footnotes Link

  1. 1 http://www.digital-web.com/articles/web_standards_creativity_png/
  2. 2 http://www.digital-web.com/articles/web_standards_creativity_png/
  3. 3 http://www.digital-web.com/articles/web_standards_creativity_png/
  4. 4 http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/
  5. 5 http://christopherschmitt.com/2007/10/30/png-transparency-for-internet-explorer-ie6-and-beyond/
  6. 6 http://24ways.org/2007/supersleight-transparent-png-in-ie6
  7. 7 http://24ways.org/2007/supersleight-transparent-png-in-ie6
  8. 8 http://www.pil.hu/
  9. 9 http://www.kokodigital.co.uk/
  10. 10 http://therissingtonpodcast.co.uk/
  11. 11 http://therissingtonpodcast.co.uk/
  12. 12 http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/
  13. 13 http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax
  14. 14 http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax
  15. 15 http://blog.raduceuca.com/
  16. 16 http://blog.raduceuca.com/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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

  1. 1

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

    0
  2. 2

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

    0
  3. 3

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

    Thanks for the post

    0
  4. 4

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

    0
  5. 5

    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 http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

    0
  6. 6

    Great article!

    -1
  7. 7

    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. :)

    0
  8. 8

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

    I don’t know about creativity, but another website that uses Transparency is http://www.modeblog.nl/

    0
  9. 9

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

    0
  10. 10

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

    0
  11. 11

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

    0
  12. 12

    Amanda Fazani

    April 16, 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: http://www.naterkane.com/blog/2007/03/26/bgsleight/

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

    0
  13. 13

    First link is not working, this is the right one:
    http://www.digital-web.com/articles/web_standards_creativity_png/

    Cool article BTW ;)

    0
  14. 14

    VTFootballGrad

    April 16, 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.

    0
  15. 15

    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 http://allinthehead.com/retro/69/sleight-of-hand 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– http://scorewriter.net =]

    0
  16. 16

    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!!

    0
  17. 17

    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.

    0
  18. 18

    Heres a really cool example of a transparent .png header. http://www.wingsus.com

    0
  19. 19

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

    I hope to release the beta 5 this week :)

    0
  20. 20

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

    0

↑ Back to top