Re: Talk on radial gradients

On Thu, Sep 3, 2009 at 9:02 PM, David Perrell<davidp@hpaa.com> wrote:
> Arg, that's not right. It should read something like "The 100% point on <gradient-line> is the intersection with an ellipse of the specified ratio that also intersects the furthest corner from <center-point>."

David, I love you!  I just got a flash that I think simplifies
*everything* conceptually.

Look at what we're talking about.  We're discussing a gradient-line,
and arguing over how to specify its starting-point and direction.
Does this sound familiar?  This is exactly what gets specified in
linear gradients!  In fact, the only conceptual difference is how the
ending-point is calculated, and how the gradient-line is translated
into the gradient image.

So, new proposal.  Syntax is:

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

<bg-position> is as defined in Background and Borders.  It defines the
starting-point of the gradient line (the center of the radial
gradient).  It defaults to "center".

<angle> is as defined in Values.  It defines the angle of the gradient
line.  It defaults to "0deg".

<shape> is [ ellipse | circle ].  This defines the ending-shape.  It
defaults to 'ellipse'.

<size> is [ closest-side | closest-corner | farthest-side |
farthest-corner | contain | cover ].  It determines the size of the
ending-shape, by forcing it to intersect the specified part of the
box.  contain is equivalent to closest-side, cover is equivalent to
farthest-corner.  If <shape> is ellipse and you specified closest-side
or farthest-side, it must intersect the *two* closest or farthest
sides, respecively.  If <shape> is ellipse and you specified
closest-corner or farthest-corner, the ellipse's w/h ratio is equal to
what it would be had you specified closest-side or farthest side,
respectively.  It defaults to 'cover'.

The ending-point of the gradient-line is determined by extending a
line from the starting-point at the angle specified until it
intersects the ending-shape.  Color-stops are placed along the
gradient-line in a manner identical to linear-gradient().

Drawing a gradient is a simple matter of producing concentric
circles/ellipses with the same shape as the ending-shape starting at
the starting-point and scaling outward infinitely.  The color of each
circle/ellipse is the color of the gradient-line where the two
intersect.

I think this addresses every case I originally wanted to hit, as well
as most of the cases you wanted to hit (it disallows changes to
eccentricity or skewing), and a few more besides, while being simple
to write, read, and understand.  Sound good?

~TJ

Received on Friday, 4 September 2009 20:12:43 UTC