If you’ve been working in the world of web design for more than a day, you know all about the struggles and frustrations surrounding the issue of transparency. Well thankfully, with a little 21st century technology and a wee bit of CSS, which we’ll do in Dreamweaver, we can actually achieve some pretty amazing transparent effects—across all the popular web browsers. To do so, we’ll be making use of the PNG (Portable Network Graphics) file format, a format that offers up a lot of potential, but that’s sadly been forgotten by most designers and developers.

Before we really get going, here’s some quick background info. Way back in the web’s stone-age (circa 1995, to be precise), PNG was developed as a response to the licensing controversy surrounding the GIF file format. But developers sought not just to replace GIF, but to vastly improve upon it. And they succeeded. What they wound up creating was a file format that combined the best features of both GIF and JPG, that uses lossless compression, handles a variety of color spaces, 24-bit images, and most importantly, supports feathered transparency. As a matter of fact, PNG comes in two flavors: PNG-8 and PNG-24. It’s PNG-24 that we’ll be lookin’ at here. He’s the version that’ll support feathered transparency.

Now GIF, PNG’s main rival, measures up like a wet noodle in comparison. GIF can only handle 8-bit images with a maximum of 256 colors, compression is often weaker than PNG’s, producing larger file sizes, and GIF only supports binary transparency—that is, in a GIF image, a color is either 100% transparent or it’s 100% opaque. Whereas with PNG, we can have degrees of transparency, known as alpha transparency.

Oh yeah, and GIF also supports animation, which for many designers isn’t a make-or-break issue (what, no circa 1995 spinning globes or burning torches?). So, with all the amazing things PNG’s can do, why the heck aren’t more people using ‘em? Simple. Browser support. Well, let me re-phrase that. It isn’t browser support at all. All the major browsers on both Mac and PC support PNG, except one. Any guesses? Yup, Internet Explorer. Microsoft’s at it again! And with IE being the most popular browser, this lack of support is the nail in PNG’s coffin.


Here’s a look at the same PNG-24 graphic with a feathered drop shadow, saved with alpha transparency, and placed on a few different color backgrounds. The original Photoshop file can be seen at the top. Note how the transparency renders in various browsers: Firefox on the Mac, Firefox on the PC, Explorer 7, and good ‘ol Explorer 6.

As a matter of fact, IE does support PNG—PNG-8 that is, which can only handle binary transparency. PNG-24’s with alpha transparency make the browser choke. Thankfully though, this support issue has been rectified with the release of Internet Explorer version 7, which can handle PNG’s with alpha transparency. So does this mean the PNG format has been raised from the dead, ready for use in modern web design? Hold up, grave diggers. Problem is, there’s still millions and millions of users out there still using older versions of IE, versions that don’t support PNG. And while their numbers (thankfully) are dwindling, we still have to keep them in mind. Otherwise what they’ll see instead of a gently fading transparency is a large gray blob, and we just can’t let that happen!

So as mentioned in this article’s opening, we can rectify the whole issue with a bit of CSS to ensure that users of older versions of IE can see our feathered PNG’s. And best of all, none of the other browsers—browsers that support PNGs already—don’t understand this CSS code, and so they simply display the PNG as they normally would. In other words, the CSS coding that we’ll use will allow older versions of IE to display our PNG’s, while all the other browsers will simply keep doing what they’ve already been doing. Sound sweet? Then let’s take a look at how this works!

Okay, so to get this to work, we’re gonna make use of some CSS image filters—filters that typically do some pretty goofy things like image fades, transitions, and other cheesy effects. However, two of ‘em are gonna help us out here: one called AlphaImageLoader, and another which is simply called Alpha.

AlphaImageLoader is a nifty filter that’s supported from IE 5.5 onward. It allows you to apply an image to the background of an element, so long as that element has dimensions set for it (width and height) that match the image’s dimensions. The second, Alpha, can apply transparency to any element. Great, let’s get this working.

Here’s whatcha do to get this to work:

1. In Photoshop, either open or create an image that has a feathered transparent effect.

For example, you might have some text with a feathered drop shadow that you’d like sitting on a transparent background, or perhaps an image that contains an area of partial transparency, like a bride’s veil. Make sure that your image contains transparency in one way or another—in other words, you can see Photoshop’s gray and white checkered pattern in your transparent areas.

Before going any further, make a note of your image’s pixel dimensions. Choose Image > Image Size if need be, and jot down the width and height pixel values onto a scrap of paper. Photographic memory? Even better. Alright, lets save this fella out.

2. Choose File > Save For Web & Devices.

3. On the right side of the Save For Web & Devices dialog, choose PNG-24 from the Preset pull-down menu.

Double-check that the Transparency option is checked just below the Preset menu. In the dialog’s main viewing window, you’ll see Photoshop’s gray and white checkered pattern showing through the transparent areas of your image once again. Perfect.

4. Click Save; then in the Save Optimized As dialog that appears, navigate to the directory you’d like to save your image in; give your image a name; then click Save.

I’d suggest saving this image into a site folder that you’ve defined in Dreamweaver—cuz it’s all Dreamweaver and coding from here on in!

5. Launch Dreamweaver; then either create a new page, or open an existing page that you’d like to insert your new graphic onto; then place your cursor where you’d like your image to appear.

Make sure too that your page—or at least the area where you’re dropping your image—has some kind of background set for it already, like a solid color or a graphical background. Otherwise, you won’t be able to tell if this worked!

6. Switch over to Dreamweaver’s code view; then paste in the following code:

Hang in there, you’re almost done. Next we need to tweak the code just a bit for your specific image.

7. In the pasted code, make the following changes:

• In the first line of code, where it reads change the width and height values to the size of your PNG as well.
• In the second line of the code, where it reads filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’Image.png’) set scr=’Image.png’ to the name of your PNG file.
• Finally, towards the end of the code, where it reads src=”Image.png” width=”100″ height=”100″>, set src=”Image.png” to the name of your PNG file.

You’re done! Now for the moment of truth.

8. Save your page in Dreamweaver, then preview it in your various browsers.

Be sure to preview the page not only in older versions of IE, like version 5.5 and 6, but also check it out in IE7, FireFox, Safari, and any other browsers you have handy. If you have both a Mac and a PC at your disposal (or Parallels on your Mac), check out your page under the different platforms. If you’ve done this correctly, your image should render perfectly across all your browsers.

Awesome!

So there you are; the dramatic tale of PNG, and with a little help from CSS, how he makes a comeback as a file format mainstay. Now that all modern browsers support PNG’s, and with a method for getting ‘em to render those pesky versions of IE, there’s no reason not to make use of this amazing graphic format. You may want to do some further reading on PNG and what he can do for ya, and definitely get fiddlin’ with ‘em in Photoshop and Dreamweaver. Have fun!

Share & Enjoy


Similar Articles:

 

  1. Don (Reply) on Tuesday June 24, 2008

    Thanks,
    But I really didn’t really understand which code to change in step 7, if you could clarify that part it would be great.

  2. Aurus Bazua (Reply) on Tuesday June 24, 2008

    Great tutorial! thank you for the introduction to filters in CSS

  3. Jerry (Reply) on Tuesday June 24, 2008

    how do i switch to the dreamweavers code,ie how to apply the code??

  4. Pierre (Reply) on Tuesday June 24, 2008

    It just mean go to view tab select code.

  5. Anthony (Reply) on Tuesday June 24, 2008

    That is bleepin’ AWESOME!!! I had given up on trying to use drop shadows with transparencies. This opens up so many options. Thank You!!!

  6. Rob (Reply) on Tuesday June 24, 2008

    @Don: The pasted code in step 6 between the span tags.

    Good tutorial thanks! Gave up using Gif a while ago. This explains a lot of problems I was having with PNG.

  7. Macboy777 (Reply) on Tuesday June 24, 2008

    Well the autor isn’t right at all! Safari of Apple on a Mac does’nt support PNG 24 fully at all! Let me explain why! I did buttons with transparency in PNG. The problem is: Firefox 2, 3 (Mac and PC) and IE7(PC) showed them correctly! But Safari 3(MAC) showed them very bad, but Safari 3(PC) showed them correctly, this is really strange! What i did is, i made the 24 bit PNG to 32 with Fireworks and transparent mate, and only in this case Safari 3(Mac) showed the transparency correctly!!! Do a light blue button well designed on a grey backround and make rollover, you will see what i mean, you will be shocked about Safari!

  8. marriaTTe (Reply) on Tuesday June 24, 2008

    why i can only see the shadow in gray only? in IE7 and FF3.. can somebody please help..

  9. jen (Reply) on Tuesday June 24, 2008

    U Da bomb! Thanks so muh!

  10. Joseph Orr (Reply) on Tuesday June 24, 2008

    Thanks so much.

    For a designer, and a computer Guru who picks things up easily, this = glory

  11. kc (Reply) on Tuesday June 24, 2008

    One question:

    What is the code if the images are part of the CSS style sheet not the html – i.e. background images?

    Also, would it be possible to change the code for pasting to text instead of a graphic?

  12. Rudy Martin (Reply) on Tuesday June 24, 2008

    Where do you get the code in step #6?
    Is it stored somewhere in dreamweaver or do I have to copy and paste it from this tutoral?

  13. Mark (Reply) on Tuesday June 24, 2008
  14. Alex rawling (Reply) on Tuesday June 24, 2008

    OMG! i have wanted to know how to do this FOR AGES! GAHHH i’m soooo happy that now i can do it! THANK YOU!!! :D :D



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby