W3C home > Mailing lists > Public > www-style@w3.org > December 2007

[Proposal] CSS gradients

From: Charles A. Landemaine <landemaine@gmail.com>
Date: Sat, 8 Dec 2007 14:37:31 -0300
Message-ID: <e6575a30712080937s55ccb8b8v432f41dab9c3d53e@mail.gmail.com>
To: www-style@w3.org

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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:56 GMT