If youve 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 well do in Dreamweaver, we can actually achieve some pretty amazing transparent effectsacross all the popular web browsers. To do so, well be making use of the PNG (Portable Network Graphics) file format, a format that offers up a lot of potential, but thats sadly been forgotten by most designers and developers.
Before we really get going, heres some quick background info. Way back in the webs 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. Its PNG-24 that well be lookin at here. Hes the version thatll support feathered transparency.
Now GIF, PNGs 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 PNGs, producing larger file sizes, and GIF only supports binary transparencythat is, in a GIF image, a color is either 100% transparent or its 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 isnt a make-or-break issue (what, no circa 1995 spinning globes or burning torches?). So, with all the amazing things PNGs can do, why the heck arent more people using em? Simple. Browser support. Well, let me re-phrase that. It isnt browser support at all. All the major browsers on both Mac and PC support PNG, except one. Any guesses? Yup, Internet Explorer. Microsofts at it again! And with IE being the most popular browser, this lack of support is the nail in PNGs coffin.
Heres 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 PNGPNG-8 that is, which can only handle binary transparency. PNG-24s 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 PNGs 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, theres still millions and millions of users out there still using older versions of IE, versions that dont support PNG. And while their numbers (thankfully) are dwindling, we still have to keep them in mind. Otherwise what theyll see instead of a gently fading transparency is a large gray blob, and we just cant let that happen!
So as mentioned in this articles 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 PNGs. And best of all, none of the other browsersbrowsers that support PNGs alreadydont understand this CSS code, and so they simply display the PNG as they normally would. In other words, the CSS coding that well use will allow older versions of IE to display our PNGs, while all the other browsers will simply keep doing what theyve already been doing. Sound sweet? Then let’s take a look at how this works!
Okay, so to get this to work, were gonna make use of some CSS image filtersfilters 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 thats 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 images dimensions. The second, Alpha, can apply transparency to any element. Great, lets get this working.
Heres 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 youd like sitting on a transparent background, or perhaps an image that contains an area of partial transparency, like a brides veil. Make sure that your image contains transparency in one way or anotherin other words, you can see Photoshops gray and white checkered pattern in your transparent areas.
Before going any further, make a note of your images 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 dialogs main viewing window, youll see Photoshops 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 youd like to save your image in; give your image a name; then click Save.
Id suggest saving this image into a site folder that youve defined in Dreamweavercuz its all Dreamweaver and coding from here on in!
5. Launch Dreamweaver; then either create a new page, or open an existing page that youd like to insert your new graphic onto; then place your cursor where youd like your image to appear.
Make sure too that your pageor at least the area where youre dropping your imagehas some kind of background set for it already, like a solid color or a graphical background. Otherwise, you wont be able to tell if this worked!
6. Switch over to Dreamweavers code view; then paste in the following code:
Hang in there, youre 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.
Youre 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 youve done this correctly, your image should render perfectly across all your browsers.
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 PNGs, and with a method for getting em to render those pesky versions of IE, theres 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!