Re: Talk on radial gradients

My primary goal with this syntax is to allow the following gradients
to be specified in CSS in a simple and flexible manner (that is, that
stretches in the obvious way with the box):

http://www.xanthir.com/etc/gradient-examples/grad9.png
http://www.xanthir.com/etc/gradient-examples/grad10.png

My secondary goal is to keep the syntax close to that of
linear-gradient, to make it easier to learn.

So, I shouldn't need to explain what a radial gradient is, or how it
gets drawn.  If you need an explanation, check the Surfin' Safari
post; it's just a starting circle that transitions to an ending
circle.  We can be more exacting with the terminology when we write an
actual spec; for now let's just talk loose and easy.  I'm also using
circle and ellipse interchangeably here.

Syntax:

radial-gradient( <bg-position>? <shape>?, <color-stop>, <color-stop>[,
<color-stop>]* );

<bg-position> defines the center of the starting ellipse.  It defaults
to "center".  Right now I'm saying that the radius of the starting
circle is always 0, but that may change.

If the center of the starting circle is in a corner of the box, the
center of the ending circle is in the same corner.  If the center of
the starting circle is on a side of the box, the center of the ending
circle is in the center of that side.  Otherwise, the center of the
ending circle is the center of the box.

The radius of the outer circle is determined by the <shape>.  It is
drawn from the six keywords [width | height | bigger | smaller | inner
| outer].  It defaults to "inner" (or maybe "outer" - I'm not sure
which is best).

[width | height | bigger | smaller] all define a circular shape, with
the *diameter* equal to the the width of the box, the height of the
box, the bigger of the two dimensions, or the smaller of the two
dimensions.  [inner | outer] define an ellipse that is either
inscribed by the box or circumscribes the box (that is, the ellipse
either touches the center of the box sides or the corners of the box).

If the starting-point is on the left or right edge of the box, it
instead describes a half-circle/half-ellipse with a height computed as
described above, and a width equal to double what is described above.
If the starting-point is on the top or bottom edge, it instead
describes a half-circle/half-ellipse with a width computed as
described above, and a height equal to double what is described above.
 Finally, if the starting point is on a corner of the box, it
describes a quarter-circle/quarter-ellipse with width and height both
equal to double what is describe above.

The actual transition works exactly as described in the Surfin' Safari
post, where the position of the center and the radius transition
together from the start to the end (in the beginning the radius is 0),
and colors are painted only on pixels that haven't already been
painted.

Color-stops are almost exactly the same as for linear gradients,
except with one additional optional keyword:

<color> [ <length> | <percentage> ]? [ width | height | bigger | smaller ]?

The keywords are ignored unless you are providing a <length> and the
<shape> is 'inner' or 'outer'.  They describe which radius (horizontal
or vertical) the length should be taken as describing.  The other
radius is automatically scaled appropriately based on the box's
width/height ratio.  It defaults to 'width'.  0% is the starting
circle, 100% is the ending circle.



So, that's the basic proposal.  Here are some examples in action:

radial-gradient(inner, yellow, blue);
radial-gradient(center center inner, yellow, blue);
radial-gradient(yellow, blue);
   (Assuming that <shape> defaults to "inner")
http://www.xanthir.com/etc/gradient-examples/grad9.png

radial-gradient(left top, yellow, blue);
radial-gradient(left top inner, yellow, blue);
http://www.xanthir.com/etc/gradient-examples/grad10.png


I don't like that you currently have to specify the radius you're
referring to with each length.  I think generally it will always be
the same one for all <length>s you use in a given rule.  Are there any
reasonable use-cases for allowing someone to refer to two different
radiuses at a time?  On the other hand, I don't think it looks very
good to tuck that information into the first argument.

Thoughts?  Is this helpful?  Does it suck?  Improvements?

~TJ

Received on Sunday, 23 August 2009 22:42:14 UTC