Monthly Archives: May 2005

CSS in 60 – Take 2

CSS in 60Another installment of CSS in 60. Where you can see a website based on xhtml and css being built from scratch in about 60 seconds or less. A screenshot was taken anytime css changes were made that significantly alters the layout. A days worth of work compressed for your viewing pleasure. This is just another example of how CSS can be used to achieve a pixel-perfect rendition of what was mocked up in a graphics program. Click read more to view the animated GIF (412Kb).

CSS in 60 - Take 2

The state of PNG transparency

What is PNG? What browsers support the format? I thought IE didn’t have PNG support? Is it transparent or not? How can I make IE display PNG’s full transparency capabilities? These are all valid questions that arise when using the PNG format. For those that aren’t familiar with PNG (portable network graphics) it is a lossless compression that offers far greater quality and smaller filesize than the ever-so-common and proprietary GIF format. “Better quality and a smaller file! What more could I ask for?” you’re asking yourself. Well, PNG’s also allow designers real transparency. How well does your browser render them? Take a look at these images and compare the last 2 with the first, which is a GIF.

If you are viewing these images in IE, chances are these images look pretty bad. Alot of white around the shadows in the GIF and PNG-8 images and the PNG-24 is totally broken. If you are viewing this in Firefox/Mozilla then the first two images are chunky and ugly while the third properly allows you to “see through” the dropshadow to the checker board background. Whats going on here?

There are different types of transparency?

PNG transparency comes in two flavors: 8bit(indexed transparency) and 24bit (alpha transparency). The former is found in GIF’s and is the standard you see used on the internet. This kind of transparency is on/off. Absolute. The pixels are either filled, or transparent. This produces ugly white pixels around aliased, transparent images and makes it impossible to create dropshadows that work on any background. Note the white around the drop shadows in the GIF and PNG-8 images.

PNG-24 provides 254 levels of transparency per pixel. This gives designers the freedom to add dropshadows without worry of what color/pattern background is the destination. Besides dropshadows, images can now be semi-transparent. Note the green bar in the PNG-24 version – you can see the checker board pattern through it. What a windfall! This opens up all kinds of neat design implementations – if only it was widely supported.

How can I get IE to render that fancy transparency?

“Widely supported” in the browser world means “Does it work in IE?”. This is an unfortunate fact that designers have to cope with daily. If you haven’t heard of the IE7 css provided by Dean Edwards, it adds some css2 functionality, fixes some CSS issues IE currently has and renders PNG’s correctly. Its a great way to tide you over until IE7 arrives and hopefully addresses these issues. The only caveat is that it is a javascript implementation and thus could pose a liability in terms of accessibility. In other words, if a browser has javascript disabled – so are the niceties this hack provides.

If that is too much funtionality for you, Justin Koivisto has a php script that replaces image tags at runtime with the proprietary IE filter code that renders true alpha transparency.

Conclusions

Besides nifty transparency, PNG’s are far smaller than the average GIF. The compression is lossless, which means there is no artifacting like that found in JPG’s. Someone even created a PNG that displays all 16.7 million colors in 58.4Kb !

PNG is a great format that needs more attention. GIF’s have plagued the web long enough. Everyone should replace their GIF’s with PNG’s. Even for transparency. I find many designers/developers don’t relize they can use the PNG format. Many believe IE doesn’t support the format altogether – totally wrong! IE currently supports the basic transparency found in PNG-8 and the release of IE7 should show a rise in PNG use and allow designers to implement true alpha transparency in their work without hackish methods of delivery. Until then, the above methods should have you well on your way to enjoying the Portable Network Graphics format.

Resources

The PNG (Portable Network Graphics) Home Site
http://www.libpng.org/pub/png/

PHP script for replacing image tags with code that allows IE 5.5+ to render PNG’s alpha transparency. Good background information on the implementation.
http://koivi.com/ie-png-transparency/

A tome of information on PNG and its filesize saving capabilities. Lots of good examples of what PNG is capable of.
http://www.webcolors.freeserve.co.uk/png/

Dean Edwards IE7 Hack
http://dean.edwards.name/IE7/

WordPress Identity Progression

Wordpress logo progressYesterday’s WordPress IRC meetup covered many topics. One of particular note, is the progress of their logo building and identity-forming process. After recieving input from the WP community over the last couple of weeks, Matt announced the final design choice during yesterday’s meet. Now that the vectors are in place, its time to give some color to the black and white logo. I’m guessing blue will be the obvious choice.

To view the topics discussed during yesterday’s meet visit the WordPress Codex.