Getting Creative With Transparency in Web Design

Advertisement

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

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

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

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

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

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

  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/

↑ Back to topShare on Twitter

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

Advertising
  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

    Another interesting use of transparency on draggable and resizable “notes”: NoteMag.NET

    0
  10. 10

    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
  11. 11

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

    0
  12. 12

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

    0
  13. 13

    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
  14. 14

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

    Cool article BTW ;)

    0
  15. 15

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

    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
  17. 17

    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
  18. 18

    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
  19. 19

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

    0
  20. 20

    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
  21. 21

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

    0
  22. 22

    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: http://www.atomtigerblog.de

    0
  23. 23

    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.

    0
  24. 24

    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.

    0
  25. 25
  26. 26

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

    0
  27. 27

    very informative… gr8 work…

    0
  28. 28

    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

    0
  29. 29

    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/

    0
  30. 30

    Mithun P Sreedharan

    April 17, 2008 12:44 am

    Great Great article…

    0
  31. 31

    We just launched a MMO community portal with rich use of png transparency and overlapping transparent layers. Link

    0
  32. 32

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

    0
  33. 33

    you can get png24’s working in IE5.5 as well vai the bally clever chap over at youngpup.net
    http://youngpup.net/projects/sleight/

    0
  34. 34

    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.

    0
  35. 35
  36. 36

    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?

    0
  37. 37

    Yeah, cool. Very good technicks are used here: http://beloded.net

    0
  38. 38

    cool article

    0
  39. 39

    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 http://www.lrieder.com

    0
  40. 40

    You forgot

    0
  41. 41

    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.

    0
  42. 42

    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.

    0
  43. 43

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

    0
  44. 44

    Great!

    0
  45. 45

    Great article…

    0
  46. 46

    I also try to use PNG as much as possible.

    Great examples

    Thanks for a great post!

    0
  47. 47

    here is my transparent web site i’ve made. take a look.

    0
  48. 48

    Jason Marsh - Website Designer

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

    0
  49. 49

    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.

    0
  50. 50

    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. Take a look.

    0
  51. 51
  52. 52
  53. 53

    this is my latest work http://fauzan.dhezign.com

    many PNG image is this design :0

    0
  54. 54

    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.

    0
  55. 55

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

    Link
    Note: Site isn’t live yet, so the content isn’t complete

    0
  56. 56

    dinesh singh rawat

    January 21, 2009 12:32 am

    loved it :)

    0
  57. 57
  58. 58
  59. 59

    p shiva sankara rao

    March 19, 2010 9:46 pm

    Very good examples of web designing for freshers .wonderful great creativity

    1
  60. 60

    hello….png fix are working fine in IE 6 …but when i use this in ma web application…i am getting some problem…is ter any fix for web application..???i need it very badly!

    0
  61. 61

    I like the silverback example very insightful. The vines don’t come down far enough the page to touch the gorilla so they don’t have to worry about layering that. Genius!

    0

↑ Back to top