Re: [CSS3] linear-gradient() proposal

The decision to not have a vector to describe the gradient is the reason you
run into this problem.
In the past I brought up that having a transition on the angle will produce
a 'wobble' effect on the gradient's look because the length of the gradient
will vary during the rotation.

The current design was deemed simpler than a vector so it wasn't changed.

Rik

On Sat, Mar 26, 2011 at 10:15 PM, Andrew Fedoniouk <
andrew.fedoniouk@live.com> wrote:

> Following is about changes in the linear-gradient() function:
> http://dev.w3.org/csswg/css3-images/#linear-gradients
>
> Existing schema of computing angled gradients
> http://dev.w3.org/csswg/css3-images/gradient-diagram.png
> has one problem.
>
> Consider this element:
> div
> {
>  width:100%; height:100px;
>  background: linear-gradient(45deg, red, yellow, green, blue, magenta);
> }
>
> If to use current spec. then "gradient length" (distance between start and
> end
> along gradient beam) changes when width of the DIV changes.
> That is not expected and not desirable effect. Angled gradients are
> known to be stable to dimension changes.
>
> I propose to change the schema to this:
> http://terrainformatica.com/w3/linear-grdient-schema.png
>
> As you see there is a concept of "gradient rectangle" -
> inscribed rectangle that has diagonal with defined gradient angle.
> The gradient transition starts and ends in this rectangle - gradient
> beam (vector) is its diagonal.
>
> Position of this rectangle inside background box of the element is defined
> by the <background-position>, see:
> http://www.w3.org/TR/CSS2/colors.html#propdef-background-position
>
> So syntax of linear-gradient() declaration will look like this:
>
> <linear-gradient> = linear-gradient(
>   [ <background-position> || <angle> ,]?  <color-stop>[, olor-stop>]+   );
>
> Here is an illustration of such "gradients with alignment":
> http://terrainformatica.com/w3/linear-align-1.png
> Rows there are elements with the following definitions:
>
>  div.gradient-origin
>  {
>   background: linear-gradient(top left 45deg, red, yellow, green, blue,
> magenta);
>  }
>  div.gradient-center
>  {
>   background: linear-gradient(center center 45deg, red, yellow, green,
> blue, magenta);
>  }
>  div.gradient-corner
>  {
>   background: linear-gradient(bottom right 45deg, red, yellow, green, blue,
> magenta);
>  }
>
> First column - elements with fixed width. Second column - fixed height.
> Here is another rendering with different width of second column:
> http://terrainformatica.com/w3/linear-align-2.png
> As you see "gradient length" is the same in both cases.
>
> --
> Andrew Fedoniouk
>
> http://terrainformatica.com
>
>