[css3-images] Making gradients readable

Looking at the examples posted in
   http://wiki.csswg.org/ideas/radial-gradients#examples-shootout
my main gripe about gradients is that they're unreadable. It is *not at all* obvious
by looking at the gradient syntax what the various numbers and lengths mean.

It seems to me this is largely due to the obsession with positional comma-separated
syntax, so I'm proposing we step away from that and work on making which bits
represent what concept a little more self-evident.

So I propose for radial-gradient() is to use keywords to denote the various types of
arguments, thus:

   radial-gradient(from center as red, orange, yellow)

   radial-gradient(from top left as red, orange, yellow)

   radial-gradient(circle from 25% 17% as red, orange, yellow)

   radial-gradient(3em 5em from 1em 2em as red, orange, yellow)

Generically, the proposed syntax is:

   radial-gradient( <shape-info>
                    from <position>
                    as <color-stop> [, <color-stop>]+ )

For consistency, I suggest that linear gradients switch from 'from' to 'to' (which,
quite frankly, works better with my brain, which interprets a fixed-length gradient
'to bottom' as being attached to the bottom side rather than being attached to the
top side):

   linear-gradient( [ <angle> | from <side-or-corner> ]
                    as <color-stop> [, <color-stop>]+ )

   linear-gradient(from top as gray, transparent 4em)

===

And while I'm at it, I'm going to toss in the idea that linear-gradient(), like
radial-gradient(), should be able to take an explicit size argument up front,
because if I'm resizing a fixed-length gradient that has 15 color stops from 5em
to 7em, I'd rather not change all the color stops.

   linear-gradient( <length>?
                    [ <angle> | from <side-or-corner> ]
                    as <color-stop> [, <color-stop>]+ )

   /* photocopy edge effect */
   linear-gradient(4em from top as
                   0% #00, 20% #4F, 27% #6F, 60% #E6, 67% #F0, 74% #F5, 100% #FF)

~fantasai

Received on Monday, 31 October 2011 05:25:47 UTC