RE: [css3-images] Radial gradients with a degenerate shape

That's because your sample page isn't the same as the examples A, B, and C.

Your example is using closest-side which is a different set of scenarios.  If your sample page used explicit radii, then the behavior I described would be shown.

-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Friday, August 12, 2011 3:15 PM
To: Brian Manthos
Cc: www-style list
Subject: Re: [css3-images] Radial gradients with a degenerate shape

On Fri, Aug 12, 2011 at 3:07 PM, Brian Manthos <brianman@microsoft.com> wrote:
> Your sample page (presumably intentionally) stops at 0.05% so of course it doesn't vanish.

Yes, it has to stop before zero, since all the prefixed implementations have special behavior for zero different than what I'm trying to demonstrate.

(Though, letting it go all the way to zero (or just small enough that the bottom rounds to zero) would show pretty clearly how the current specified behavior is discontinuous when you hit zero-width.)

> I'm not seeing the discontinuities you're referring to, unfortunately. 
> :(

Hmm, what do you mean?  Or rather, which discontinuity aren't you seeing?

> In my mind it's very simple.
>
> Think of the radial brush as a coin with zero thickness.  The whole coin is painted blue.  On top of that blue, a red circle is painted in the center on both sides and with half the diameter of the faces of the coin.  The painting was done with spray paint so there's a blend between the red and the blue -- but that blend stops before the edge of the coin.
>
> [A] Obtain a table.  Paint the table blue.  Put the coin on the table.  Position a camera directly above the coin to render case A.
> [B] Stand the coin on end (use magnets or something) with the sides of the coin facing to the "top" and "bottom" sides of the table (relative to your camera angle).  That's the rendering for case B.
> [C] Stand the coin on end (use magnets or something) with the sides of the coin facing to the "left" and "render" sides of the table (relative to your camera angle).  That's the rendering for case C.

Your physical analogy is unfortunately flawed.  The gradient-line, where colors are placed, is separate from the ending-shape, which just determines the aspect ratio of of the gradient's elliptical shape.
You're imagining that they're directly linked together, such that you can just paint an ideal ending-shape and then scale it.

> Only in case [A] is there any red visible.
>
> As you're tilting the coin from flat [A] to standing [B] / [C], you get the intermediate ellipticals such as radial-gradient(center, 10px 0.5px, red 5px, blue 7px).

Look again at the intermediate gradient you get when you shrink the X axis (or use my degenerate gradients page, setting Y to max and X to something small).  It is rendered nothing like what your physical analogy suggests.

~TJ

Received on Friday, 12 August 2011 22:59:40 UTC