Re: Linear gradients: state of the proposal

On Nov 6, 2009, at 8:16 pm, Tab Atkins Jr. wrote:

> On Fri, Nov 6, 2009 at 8:11 PM, Simon Fraser <smfr@me.com> wrote:
>>        * Optionally, an angle. If specified, the angle controls the  
>> axis of
>> the gradient, while the spread of the gradient is governed by the  
>> "fill the
>> box" rule, where the box is given by the "two point" rules above.
>
> What do you mean by this?  How is the box determined here?

The box is determined using the the rules I had above:

	* If no points are specified, the box is the element's box
	* If one point is specified, then the second point is obtained by  
reflecting the first point around the center of the box.

> Are you
> assuming that an angle can be provided in addition to 0-2 points?  So
> that, frex, "10px 10px 45deg" would create a box with a corner at
> "10px 10px" and another at "calc(100% - 10px) calc(100% - 10px)",
> filling it with a gradient at 45deg?

Exactly. So you can use the angle form without specifying points (in  
which case it just fills the box), or in addition to specifying points  
(in which case the points are simply describing the box that gets  
filled).

I made a diagram here:
<http://smfr.org/misc/css/gradients/linear-gradient.png>
For example, this could be
	linear-gradient(20% 80%, 80% 40%, 45deg, white, black);
We make a box using p1 (at 20% 80%) and p2 (at 80% 40%), choose a  
gradient axis of 45deg, and then use the "fill the box" rules to fill  
the box which has the dotted outline in the diagram. The gradient has  
solid colors outside this dotted outline, since the box determines the  
positions of the 0% and 100% color stops.

So this moves away from thinking of the points as start and end  
points, to thinking about them as describing a box that you want to be  
filled with the gradient. The gradient then either goes from the start  
corner to the end corner, or at the angle if specified.

Simon

Received on Saturday, 7 November 2009 04:55:15 UTC