Re: [css3-images] Making gradients readable

Fantasai and I came to a consensus on the syntax we'd like to see:

radial-gradient(<shape> to <extent> at <position>, <colors>)

In Images 4, when we add the ability to change the focus point, it'll look like:

radial-gradient(<shape> to <extent> at <position> [from <position> |
from offset <length>{1,2}], <colors>)

(Both of these grammars are approximate, and omit the details that
make each piece optional and order-variable.)

We chose this because 'from' really sounds like it should be
specifying where the 0% color emerges from.  Once that decision has
been made, 'at' seems to be the best of the remaining options for
specifying the center of the shape.

Because the default size is cover, this means:

* radial-gradient(from 25% 25%, <colors>) makes the 0% color at 25%
25%, and the 100% color is at a box-centered box-covering ellipse.
* radial-gradient(at 25% 25%, <colors>) makes the 0% color at 25% 25%,
and the 100% color at a 25% 25%-centered box-covering ellipse.

Examples of the above can be seen on the wiki at
<http://wiki.csswg.org/ideas/radial-gradient-readability>.

How does this sound?

~TJ

Received on Saturday, 5 November 2011 05:40:37 UTC