Re: Gradient syntax proposal

• From: Martin McNickle <mmcnicklebugs@googlemail.com>
• Date: Fri, 14 Aug 2009 18:10:21 +0100
• To: "Tab Atkins Jr." <jackalmage@gmail.com>
• Cc: Brad Kemper <brad.kemper@gmail.com>, Andrew Fedoniouk <news@terrainformatica.com>, www-style list <www-style@w3.org>
• Message-Id: <1250269821.17352.6.camel@vimes>

On Fri, 2009-08-14 at 09:34 -0500, Tab Atkins Jr. wrote:
> Am I missing anything?  Am I making anything too complex?  Are there
> ways to improve this/make it simpler/make it prettier?

Given that a large number of these gradients will be simple
vertical/horizontal ones, you could make the following simplification:

<gradient-line>:
[
  <angle> [inner | outer]?
|
  [ left | right | top | bottom ] [ left | right | top | bottom ]?
|
  <bg-position>, <bg-position>
]

where the second keyword is now optional.

When the second keyword is omitted, you assume the opposite side.

So:

background: linear-gradient(top, yellow, blue);
background: linear-gradient(top bottom, yellow, blue);

are equivalent as are:

background: linear-gradient(right, yellow, blue);
background: linear-gradient(right left, yellow, blue);

The syntax for producing a simple vertical/horizontal gradient is now very succinct.

-- Martin McNickle

Received on Sunday, 16 August 2009 10:32:08 UTC