Using cross browser transparant PNG’s

In this new series I will write a new CSS trick every day. Oops I don’t know if that is such a good idea… where am I going to find the time? All right I’ll try to post every day.

Here is a tip for all you guys who thought that crazy PhotoShopped design couldn’t be made to display in the browser window: use transparant PNG’s.

Here’s the recipe:

  1. Just design your page in PhotoShop using layers, lots of layers
  2. Export all layers as png’s, with full transparency, 24-bit’s, nice quality
  3. Use the fine pngquant tool to compress the images even more.
  4. Now place all images in an html page, and give each tag a unique ID. You don’t need to use a width and height, but if you do it would be more cross browser compatible with older browsers.
  5. Use the following css for the images
  6. img { position:absolute; border:none; margin:0; padding:0; }
  7. Now give each image an exact position
    img#fruit { top:25px; left:40px; }
    img#meat { top:50px; left:100px; }
  8. I always prefer to use only top and left, since I read horror stories about right and bottom. If you prefer to use percentages that’s fine, but not all browsers can calculate percentages that well, resulting in small pixel offsets.
  9. add the layering, using z-index. Z-index only works on elements with relative or absolute positioning. The higher the z-index, the more it is ‘on top’.
    img#fruit { top:25px; left:40px; z-index:1; }
    img#meat { top:50px; left:100px; z-index:2; }
  10. Add the page’s text content. You could have done that first, but since we are practicing PhotoShop-design-to-html-conversion we don’t really need text content. Normally you would add a div to the page without any positioning.
  11. update: really cross browser

    I realize I forgot to mention some of the cross-browser tips that make your PNG’s work wonders in the crap browser Internet Explorer.

    For solid color (or no) background

    There are several tools that can patch up a png pretty decent so that it
    shows up ok in IE. I now only use apha filters when the image has no
    solid color background. For solid colors I use the technique described

    I know I mentioned pngquant but I later found some more interesting tools. How about pngoptimize? I know that Photoshop saves gamma information in the image, which would distort the final output in IE. You can remove that information using this program.

    For real flexibility

    For real flexibility you can use the IE proprietary filter css rule. This has the huge advantage that your png transparent images can be placed anywhere.

    Here’s an example:

    #logo a {
    position: absolute;
    background: url(images/logo.png) no-repeat top left;
    width: 152px;
    height: 272px;
    * html #logo a {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/logo.png', sizingMethod='image');}

    Unfortunately, there’s a catch. The path you use in the filter is not starting at the same directory as you would in the style sheet. Instead of using the css file path, it starts from the path of the source (aka your HTML file). The other catch is that there is no positioning of the background possible, so you’ll have to position the container instead.

    Static images

    Wait, it gets better! You can use javascript to automatically have all png images on the page use the filter property. See the following small script that you can include in every page of your site. No thinking required.

    fixPNGs = function ()
    // go through each image in the page and fix them
    for ( var i = 0; i < document.images.length; i++ ) { // only if the image is a png var img = document.images[ i ]; if ( img.src.test(/\.png$/i) ) { = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', enabled=true)"; img.src="/images/blank.gif"; } } }; window.attachEvent("onload", fixPNGs); [/sourcecode]


Impression of WC2005

logo brutally ripped off speedcubing.comWell, I am back at home, and let me tell you about all the good, the bad and the ugly experiences (yes Gaetan, this is a pun).

The bad

Let’s start with the bad for a change. There I was, standing on the stage, ready to blow everyone away with my sub 20, and then it happened: total blackout. My thoughts got sucked into another dimension and I stared at the cube for what appeared to be ages, but was in fact just a couple of (precious) seconds.

Result: a miserable 25 seconds. The other two solves had the same disease and resulted in 30 and 40 seconds. My average was not better than 20 years ago.

The good

The good things happened afterwards. I must say I loved seeing everyone: Dan, Jasmine, Dan, Macky (didn’t get past security and media though to talk to him), Brent, Ron, Ton, Peter, Lars, Lars. Joël, it was great meeting you finally.

I also loooooved the races that were going on ubiquitously, is that a word? The most fun was that one race table with Yuki, Jon and Doug Reed. They were all so much faster than me, that I was pushed to the upperlower limits of my cubing career. I did several 20’s, some 19’s, some 18’s, 1 or two 17’s and one 16. And on top of that I broke my avg and set a new 21.335, the old one was 22.

The ugly

This wasn’t cube related though. The first day I thought let’s drink lots of water, so I bought a bottle and put it in my bag. The opening mechanism was somewhat like my old popping cube, so it ended up being open inside my bag, thereby destroying not only all the algorithms I had collected for this trip but also my digital camera!!!

If that wasn’t enough on the way back, right when I was about to check in for my flight I found out my wallet was missing. Stolen or lost, I couldn’t say.

update: it appears to have become the good, the bad, the ugly part II, Hollywood ending: Mickey Mouse found my wallet and returned it by FedEx!! Thank you Mickey!