[css3-images] [css4-images] radial-gradient readability and offset radials

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( <shape>?
                    from <position>
                    to <extents>
                    [, <color-stop>] + )
with:

  <shape>    = ellipse | circle

  <position> = <'background-position'>

  <extents>  = closest-corner | closest-side | farthest-corner | farthest-side |
               [ <length> | <percentage> ]{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( <shape>?
                    at <position>
                    [ from <position> | from offset <size>]
                    to <extents>
                    [, <color-stop>] + )

with <size> = [ <length> | <percentage> ]{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,<!DOCTYPE html>%0A<div><%2Fdiv>%0A<div>%0A<style>%0Adiv { %0Awidth%3A 200px%3B%0Aheight%3A 
200px%3B%0Aborder%3A thin solid%3B%0Afloat%3A left%3B%0Amargin%3A 10px%3B%0A}%0Adiv%3Afirst-child { %0Abackground%3A 
-webkit-gradient(radial%2C 25%25 25%25%2C 0%2C 50%25 50%25%2C 150%2C from(white)%2C to(black))%3B%0A}%0Adiv%3Anth-child(2) 
{%0Abackground%3A -webkit-gradient(radial%2C 25%25 25%25%2C 0%2C 25%25 25%25%2C 225%2C from(white)%2C to(black))%3B%0A}

~fantasai

Received on Friday, 11 November 2011 00:23:09 UTC