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. 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. Otherwise what they’ll see instead of a gently fading transparency is a large gray blob, and we just can’t let that happen! And while their numbers (thankfully) are dwindling, we still have to keep them in mind. Problem is, there’s still millions and millions of users out there still using older versions of IE, versions that don’t support PNG. So does this mean the PNG format has been raised from the dead, ready for use in modern web design? Hold up, grave diggers. Thankfully though, this support issue has been rectified with the release of Internet Explorer version 7, which can handle PNG’s with alpha transparency. PNG-24’s with alpha transparency make the browser choke. Note how the transparency renders in various browsers: Firefox on the Mac, Firefox on the PC, Explorer 7, and good ‘ol Explorer 6.Īs a matter of fact, IE does support PNG-PNG-8 that is, which can only handle binary transparency.
The original Photoshop file can be seen at the top.
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. Microsoft’s at it again! And with IE being the most popular browser, this lack of support is the nail in PNG’s coffin.
#Photoshop 5.5 how to make logo background transparnet Pc#
All the major browsers on both Mac and PC support PNG, except one. So, with all the amazing things PNG’s can do, why the heck aren’t more people using ‘em? Simple. 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?). Whereas with PNG, we can have degrees of transparency, known as alpha transparency. 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. Now GIF, PNG’s main rival, measures up like a wet noodle in comparison. He’s the version that’ll support feathered transparency. It’s PNG-24 that we’ll be lookin’ at here. As a matter of fact, PNG comes in two flavors: PNG-8 and PNG-24.
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. But developers sought not just to replace GIF, but to vastly improve upon it.
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. 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.īefore we really get going, here’s some quick background info. 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. 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.
0 kommentar(er)
