W3C home > Mailing lists > Public > www-style@w3.org > March 2011

[CSS3] linear-gradient() proposal

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Sat, 26 Mar 2011 22:15:22 -0700
Message-ID: <BLU159-ds187AE8AAB89EB3D9D146D3F8BB0@phx.gbl>
To: <www-style@w3.org>
Following is about changes in the linear-gradient() function:

Existing schema of computing angled gradients
has one problem.

Consider this element:
   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 
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:

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: 

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":
Rows there are elements with the following definitions:

    background: linear-gradient(top left 45deg, red, yellow, green, blue, 
    background: linear-gradient(center center 45deg, red, yellow, green, 
blue, magenta);
    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:
As you see "gradient length" is the same in both cases.

Andrew Fedoniouk

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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:44 UTC