Re: [css3-images] Gradient Magic

> On Mon, Jul 18, 2011 at 2:55 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> Well, the way I thought of it was to stretch a square to determine the
>> length, angle, and placement of the gradient path. But still place the color
>> stops along the final path within the final rectangle. What Behnam made me
>> think though is that the final angle shouldn't be based on the path of the
>> two gradient endpoints (45deg to connect two corners), but rather on a path
>> perpendicular to the OTHER two endpoints. Once you resolve what the final
>> used angle should be in degrees, you just treat it like those degrees were
>> specified by the author.
> 

On Jul 18, 2011, at 10:45 PM, Behnam Esfahbod ZWNJ wrote:

> Brad, that's exactly how I have implemented it, "prependicular to the
> other two endpoints", but it worth noting that the result vector would
> be mirror of the vector for "normal" mode based on one of y=x or y=-x
> lines.

On Jul 18, 2011, at 3:08 PM, Tab Atkins Jr. wrote:

> I think that's very difficult to visualize or think about, and it
> would be unimaginably simpler to just draw the gradient into a square
> and then stretch it, exactly as if you were using objectBoundingBox
> units.

It is really no harder to visualize than the text describing how the degree variant of linear-gradient works. It is mostly a matter of the degree being based on the position of the corners. Authors shouldn't care how you get there, the real question is what looks more natural? Now that I compare them, I think the one that has a halfway point between the other two corners looks more natural, and fills the space better. As on the left side of this:

http://www.bradclicks.com/cssplay/linear-gradient/corner-to-corner-gradient.png

The one on the right is based on the current spec, but looks much more like a vertical gradient because of the proportions of the box. The one on the left looks more natural to me for gradating between corners.

Received on Sunday, 24 July 2011 22:16:42 UTC