[CSS3] linear-gradient() proposal

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

Received on Sunday, 27 March 2011 05:30:57 UTC