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:15:42 UTC