Quote this comment

Nate Posted…

This might actually be a case of markup+CSS file weight being greater than just a repeating background image. But an interesting experiment none the less.

Quote this comment

Dylan Bennett Posted…

Sorry, but that's just asinine. Was this supposed to be a joke? Shoot, I could use CSS to do ALL the images on my site, as long as nobody minds downloading a 6mb file full of divs and their styles.

Now, that aside, it's a neat trick. :)

Quote this comment

Mathieu 'P01' HENRI Posted…

Nice April fool. Beside there's nothing new, such technique have been around since the dark age of the web.

Quote this comment

Greg Posted…

Lame - This should be done with an image. It'll load faster, be more compatible and more reliable. Sure you can use 1px divs to create anything but no-one should ever use this on a real page.

Quote this comment

Kevin Posted…

Harsh comments guys. I agree that the applications are limited but thanks for sharing the CSS hack none the less. I'm always interested in new experiments in CSS,.

Quote this comment

Joe Posted…

The demo may be hefty in bandwidth, however, a followup experiment that generates the divs and styles using javascript might be more interesting.

Quote this comment

Jon Posted…

Isn't this far worse than using tables for layout? I think even the "nifty corners" trick is a bit too much hackery... but divs for gradients? Why?

Quote this comment

Nate Posted…

So that I don't have to delete any more comments: this is an expermiment, not a recommended practice. Experiments by their very nature should poke at the edge of what's would be considered sane methodology.

I would not recommened folks actually use this over a background image - but I would recommend checking out this, and other experiments to understand what's being toyed with. Occasionally the experiments lead to something supremely useful, something that wouldn't have been considered without the mad scientist approach.

Quote this comment

Lurker Posted…

By my count, the file is 20k. Do you have a gradient image that can scale to 1600x1200 and stay under 20k without pixelation? That would take vector graphics. This seems to be a bitmap technique and yet, stays relatively small. Just an observation. Also, if you notice, this is a php file and those divs are probably automatically generated which makes the html output kind of long, but is probably just a few lines of code! I'm not saying I would do it that way, but I like to keep an open mind. Just some food for thought. I'm sure I will piss some people off, but that was not the intention at all. Just keep your minds open and consider all possibilities.This is a much better demo than hello world!

Quote this comment

gilgamash Posted…

Well, I face the problem that when changing window (or frame) size, working with images can destroy the complete design. As Lurker sort of stated already: one would have to use vector gfx. I once coded a color gradient in JavaScript, but than there are people not enabling JS for some reasons. From this point of view, any idea NOT relying on unscalable images is welcome.

Quote this comment

Paul Posted…

The main problem I have with this is that you're going to have to use z-index's and relative positioning to put anything on top of the gradient, which is very unsafe for cross-browser support. A nice background image in your body's style does the job just fine and is uber small as you only need a 1 pixel wide image on repeat! I do like all these experiments as they serve to show us that CSS is very complex and powerful, but let's use a better part of css - background-image - instead.

Quote this comment

kevin Posted…

Well it is convenient for figuring out what color I want for a gradient image, and once I've got the color I want I just do a screen print copy and paste it into Paint, there is my gradient image. Nice little utility.