W3C home > Mailing lists > Public > www-style@w3.org > July 2011

Re: [css3-images] Gradient Magic

From: Brad Kemper <brad.kemper@gmail.com>
Date: Sun, 24 Jul 2011 15:15:58 -0700
Cc: Brian Manthos <brianman@microsoft.com>, Behnam Esfahbod ZWNJ <behnam@zwnj.org>, WWW-Style <www-style@w3.org>
Message-Id: <1A4766D8-05E7-4457-AC70-DB12D485CE8E@gmail.com>
To: Tab Atkins Jr. <jackalmage@gmail.com>
> 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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:42 GMT