RE: Talk on radial gradients

Tab Atkins Jr. wrote:
| ...sorry...
S'OK, simple seppuku will suffice for atonement.

Meanwhile, I wrote:
| > <color-stop>s are measured along <axis> from the 
| <center-point>. This line corresponds to <gradient-line> for 
| linear-gradient. The 100% point on the <gradient-line> (er, I 
| mean <axis>) is the distance from <center-point> to the farthest 
| corner (<size>='corners') or to the farthest side 
| (<size>='sides') in the direction of the axis.

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>."

| So in your death-star example, it would be something like
| radial-gradient(30px 30px circle sides, ...)?

In the example it could be (30px 30px circle, ...) with the final color-stop at 170px. 
 
| That works elegantly for circles (and I like the ability to reuse the
| gradient-line concept; I'm gonna rewrite some parts to use that), but
| I'm not sold yet on ellipses.  How does one control the ellipse w/h
| ratio?  It's implied when using 'sides' (whatever ratio is necessary
| to touch the sides), but not for 'corners', as you sometimes have an
| infinite number of ellipses that will intersect the four corners.

As I defined it, the elliptical W/H ratio for 'auto' (or 'ellipse') is the same as the box W/H ratio anywhere along the diagonals between box corners - it's the ratio of distances from <center-point> to farthest sides.

| Also, specifying distances on an ellipse may be more difficult than
| necessary here, if the gradient-line is pointing in a diagonal
| direction.

I meant gradient-line direction to be the same as <axis>, horizontal or vertical, not a diagonal. I probably helped you conclude otherwise by compounding an incorrect value derivation with "is the distance" instead of "is equal to the distance." I like 'gradient-line' better than 'axis' because (a) there are two axes, (b) 'axis' doesn't quite go with 'width' and 'height', and (c) it relates to linear-gradient. 

| Finally, we lose of the simplicity in both circles and
| ellipses when the center is off-center, as we have to specify to align
| to the closest or farthest side.

Sorry, not sure what that means.

| I like it, but 'contain' has a problem - the shape won't always be
| contained within the box.

Yes, 'contain' in this context would have to refer to containment only by the furthest sides.
 
| Actually... It doesn't match the ratio properly.  Spec error.  A
| gradient centered on the left side should meet the other three sides,
| so its actually twice as fat as it would be if the ratio was
| maintained.  Do you think your proposal can address this properly?  I
| think it's kind of important.

With what I proposed, W:H ratio along corner-to-corner diagonals would be maintained. But as <center-point> moves outward from 'center' at other angles, the ratio would change. In a 100x100px box, <center-point> at 'center' (and outwards to any corner) would have a W:H ratio of 1:1, but at 'left' it would have a ratio of 2:1, 'contain'ed on 3 sides. I didn't consider this a problem because I don't see automatically-shaped-to-box-ratio radial gradients as very useful except when <center-point> is 'center' or at box corners.

| <shape> percentages are complexifying because people don't usually
| think of ellipses in terms of ratios (at least, I don't), and they
| also prevent you from using the box ratio.

I agree that percentages aren't used for geometric shapes. But ratios...? Aspect ratio might be the best way to describe shape in this context, expressed as a floating point value W/H. With gradient-line direction = 'width', a centered gradient in a 100px X 200px box would have a ratio of .5.

| ...I see the possibility that one can still
| achieve ratios based sensibly on box information, without being stuck
| with *only* the actual box ratio.

So, how about replacing <shape> (and my previous definition of 'auto') with <aspect-ratio>? Value = width/height. Keyword 'circle' = 1, keyword 'box' = (box width)/(box height). Initial: box. Is this what you wanted - box shape maintainable for all positions? Could you not then specify modified box ratios, e.g. calc(box-.2)?

David Perrell

Received on Friday, 4 September 2009 02:03:44 UTC