[Proposal] CSS gradients

Hello,

Here's my proposal for the next specifications of CSS:

We could style elements using scalable gradients using fixed and
variable units. For instance if you want a simple vertical linear
gradient from brown to red:

#header {
     background: gradient(0 #500, 100% #c00) vertical linear;
}

If you want a horizontal gradient with several colors:

#header {
     background: gradient(0 #0cf, 50% #a8eeff, 100% #007d9c) horizontal linear;
}

If you want an oblique gradient, with fixed values:

#header {
     background: gradient(0 #678500, 200px #c0ff00) 45deg linear;
}

A radial gradient could be:

#header {
     background: gradient(0 #6fb0d7, 50px #000) x=100px y=-25px radial;
}

And a diamond gradient:

#header {
     background: gradient(0 #ecde00, 30px #af9400) x=100px y=-25px diamond;
}

I have uploaded an example for you to see better:
http://www.imgplace.com/directory/dir3583/1197135240.png
I hope you like the idea.
Cheers,


-- 
Charles A. Landemaine.

Received on Saturday, 8 December 2007 18:48:57 UTC