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


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:
I hope you like the idea.

Charles A. Landemaine.
Received on Saturday, 8 December 2007 18:48:57 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:32 UTC