After much discussion, Tab, Brad, Brian, and I worked out a variation of the
syntax dbaron proposed in:
http://lists.w3.org/Archives/Public/www-style/2011Nov/0049.html
which was:
radial-gradient( ?
from
to
[, ] + )
with:
= ellipse | circle
= <'background-position'>
= closest-corner | closest-side | farthest-corner | farthest-side |
[ | ]{1,2}
The only difference is we replaced 'from' with 'at'.
See
http://dev.w3.org/cvsweb/~checkout~/csswg/css3-images/Overview.html?rev=1.200;content-type=text%2Fhtml
for the full details.
The other piece that was worked out was how to extend this to handle offset
gradients in the future, and the consensus among the four of us was to use
the 'from' keyword for that (hence the switch to 'at') should we choose to
go there.
radial-gradient( ?
at
[ from | from offset ]
to
[, ] + )
with = [ | ]{1,2}
As in SVG, if the color origin is outside the 100% ellipse, it is shifted to
the closest point on the ellipse.
Because the default size is 'cover', the default center is the box center,
and the default color focus is the elliptical center, this means:
radial-gradient(at 25% 25%, ...) -- elliptical radial gradient centered
at 25% 25% and extending to the
farthest-corner (bottom right)
radial-gradient(from 25% 25%, ...) -- centered elliptical radial gradient,
with color focus at 25% 25%
radial-gradient(from offset 5% 5%, ...) -- centered elliptical radial gradient,
with color focus 5% to the right
and 5% down from the center
This data URL shows the difference between shifting the center and shifting
the focus. Use WebKit to view:
data:text/html;charset=utf-8,%0A