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 browser- 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.
To be continued in Part 3.....
No comments:
Post a Comment
If you like Graphic Identity's articles & our free design box, please drop your comment or subscribe Thank you :)
NOTE:
GraphicIdentity admin will always moderate all comments. We will not publish comments that include irrelevant links with targeted anchor text. Also it will be nice if you mention your name rather than to comment as an anonymous user.