Re: [css3-images] Gradient Magic

On Jul 18, 2011, at 11:17 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

> 
> On Mon, Jul 18, 2011 at 7:51 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> My "as-square" proposed keyword, as I described it [1], would actually have created the gradient this way (although now I notice my renderings were wrong). Thus, if the gradient is in a square and you use a multiple of 45deg, it not only goes corner-to-corner, but also the mid point stretches between the other two corners. Then when you let the square act as a dimensionless box and conform its width and height of the size of the background painting area (as linear-gradient does now), and you also let the angle flex with the box to go from 45deg to something else. So the midpoint that stretched between the other two corners would also continue to do so.
> 
> It actually wouldn't work with your as-square as you described it,
> since that only affected the angle; the rendering was then done into
> the full rectangle.  

Well, maybe I didn't describe it well enough then. 

> You need to actually draw the entire gradient
> into a square and then stretch it, like what Behnam described with
> using an SVG gradient and background-size, or do coordinate space
> tricks that accomplish the same thing, like with SVG's
> "objectBoundingBox" coordinate space:
> 
> <!DOCTYPE html>
> <svg>
> <defs>
> <linearGradient x1=0 y1=0 x2=1 y2=1 gradientUnits=objectBoundingBox id=foo>
>  <stop offset=0% stop-color=red />
>  <stop offset=50% stop-color=white />
>  <stop offset=100% stop-color=blue />
> </linearGradient>
> </defs>
> <rect width=300 height=100 fill=url(#foo) />
> </svg>
> 
> The only problem is that it then becomes nonsensical to use <length>s
> when placing color-stops, as the size of the square is arbitrary.  

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.

Received on Monday, 18 July 2011 21:56:13 UTC