1 For mockups it's smart

Interesting.. This could be pretty useful when making mockup designs. But I’d prefer the “real thing” when doing something for production use; That IE PNG hack looks pretty ugly when you select it in the browser so I usually prefer not using it when I’m able to.

And I don’t think this is something big enough to justify breaking of breaking the semantic markup rule. But that might be just me.

But this brings the idea of creating a script (PHP or something) that takes first and second color, size and alignment and generates the picture for you.

And I can’t see why you have 100px width on your images when one is enough. It doesn’t add many bytes, but still some..

Now I should stop complaining. I had a great time reading the article.

posted at 08:18 am on November 14, 2006 by Per Eckerdal

2 Multiple PNGs

We’ve been using this technique for a while and one thing that helps is to create a set of incrementally more transparent versions (we used increments of 5% so there are 20 of each). Also it can be useful to have left-right and right-left versions too.

I think it’s worth pointing out that the images should be 256×256 for completely smooth gradient.

posted at 08:54 am on November 14, 2006 by Danny Hope

3 Wanted: Cleaner markup

Nice article. Would it be possible to refine this technique by inserting the extra image tags using javascript? It would certainly make the markup cleaner.

posted at 09:23 am on November 14, 2006 by Jesro Christoffer Cena

4 Great job!!!

I didn’t know the technique to use PNG for IE6 as background-image, really useful. The possibility to have PNG background working with text resizeable it’s really a technique without price. I guess that it’s really useful for make navigation buttons. I guess that it’s possible either use different colours of gradient instead than black and white, so could be a good mixture of effects.

I really liked this article! Thank you for the hard job.

posted at 09:54 am on November 14, 2006 by Alessio Carone

5 Untitled

The backgrounds are broken in Opera 9 on Windows XP. They show a gap at the right.

posted at 10:29 am on November 14, 2006 by Chris Hester

6 Oh I like that!

That’s not only Super-Easy, it’s Super-Cool!

The downside is that I’m now going to ‘waste’ half my potentially productive morning playing with gradients ;) Brilliant.

posted at 10:36 am on November 14, 2006 by Robert Swan

7 Problems In IE

Hmm, can’t get the gradients to show in IE6 either. Maybe it doesn’t work with the standalone version. (I can’t log on for comments using that either!) Works fine in IE7.

posted at 10:47 am on November 14, 2006 by Chris Hester

8 Re: Untitled

The backgrounds are broken in Opera 9 on Windows XP. They show a gap at the right.

This seems to be pretty easily fixed. The problem is just that Opera measures the 100% width of the image without the 5px padding of the box class and so results in a 10px gap.

By removing the padding from the box class and putting it on the <p> tag within the box class the 10px gap on the right hand side is fixed.

It might be an idea to think about using a <span> inside the box to provide this padding.

posted at 10:54 am on November 14, 2006 by Robert Swan

9 Pretty good technique

I like this article, because it gives some new ideas for trying new things. At th moment, I prefer gradients within the same color, for example light blue to dark blue, but this is only my taste.

posted at 11:09 am on November 14, 2006 by Thorsten Schiemann

10 Untitled

Would it be possible to refine this technique by inserting the extra image tags using javascript? It would certainly make the markup cleaner.

Spartan markup is inherently beautiful – but who is it for? The designer or the end user?

Gradients have resurged. There was a period when solid rectangles of low-hue colours were the only truly safe thing. I’m very interested in the causal relationship between things like gradients and rounded corners falling back into fashion, and the innovative techniques for them (such as this) making waves.

Nice article. Very good run through of cross-browser application and an excellent manner of backing up convenient, legible, practical examples with, ‘and of course, there are standards and conditional comments’. Hehehe.

posted at 11:44 am on November 14, 2006 by Barney Carroll