CSS and the Magic of Transparent PNG’s

Since I realunched the new, old-style Daily Exhaust, I’ve already had questions on the “NEW!” graphic on the homepage. How is that archieved? It seems do defy the grid system and walk through DIV tags like magic.
Well, it’s not magic, just some CSS and a PNG.


I think there will always be browser compatibility issues we’ll have to deal with in web design, but good news is, we can safely put those GIFs away and whip out those PNG-24’s with transparency.
To achieve the overlapping effect of the finger-pointing “NEW!” graphic I did 2 things:
1. I saved the image out from Photoshop as a PNG-24.
screengrab: Save For Web - PNG-24
2. I placed the image in my righthand ‘sidebar’ DIV and gave it the following negative margins:

#pointie {
margin: -93px 0 0 -55px;
}

This moves the image up 93 pixels and left 55 pixels.
Done!