# Re: Linear gradients: state of the proposal

From: Simon Fraser <smfr@me.com>
Date: Fri, 06 Nov 2009 20:53:30 -0800
Message-id: <64AF304E-6A49-4D3F-876C-DC13793F8733@me.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
```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
>> "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).

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:40 UTC