[css3] linear-gradient() proposal

I propose to change <linear-gradient> production defined here:
http://dev.w3.org/csswg/css3-images/#linear-gradients
to the following.

Rendering of various linear gradients
http://terrainformatica.com/w3/linear-gradient-proposal.png
covered by the proposal. (There is a debug rendering there showing
gradient vector used in each particular case.)

The proposed linear-gradient() "function" is:

<linear-gradient>
    = linear-gradient( [<position>,] [<angle>,] <color-stop>[, 
<color-stop>]+ );

Where <position> is either one of these:

a)     [top | bottom] || [left | right]
b)     <length> [ <length> ]
c)     <length> '/' <length> <length> '/' <length>

Case (a) defines simple top-to-bottom and diagonal cases.
Cases (b) and (c) define cases when gradient is contained inside
some arbitrary rectangle.

Meaning of case (c):
  x-position / x-offset  y-position / y-offset

x/y-positions define start position of the gradient vector and
x/y-offsets define offset of the end position from start position.

When 'angle' is provided then there are following combinations possible:

- angle.a) no position is given at all:
       rendering follows these rules: 
http://dev.w3.org/csswg/css3-images/gradient-diagram.png

- angle.b) start position is provided but no offset:
       rendering follows the rule above except of the gradient vector starts 
in 'start' point

- angle.c) both start and offset are provided:
       start defines center of the ellipse and offset defines two radii of 
the ellipse.
       diagonal/line that is drawn using angle through the start and 
connecting points on the outline
       of the ellipse is the gradient vector.

Case (angle.c) allows to animate angles in gradients without "wobbling"
(when ellipse is set to circle)

Here are styles used to produce that rendering above:

  @const START: rgb(255,0,0);
  @const END: rgba(0,0,255,0.5);

  /* simple top to bottom case */
  div.gradient
  {
    background: linear-gradient(top, @START, @END);
  }

/* simple diagonal case from top/left to bottom/right */
  div.diagonal-gradient
  {
     background: linear-gradient(top left, @START, @END);
  }

  /* simple gradient in fixed are at bottom/right corner */
  div.gradient-fixed
  {
    background: linear-gradient(100%/-80px 100%/-80px, @START, @END);
  }
  /* simple angled gradient covering the area in full */
  div.angle-gradient
  {
    background: linear-gradient(45deg, @START, @END);
  }

  /* angled gradient from the given position */
  div.angle-gradient-pos
  {
    background: linear-gradient(25% 25%, 45deg, @START, @END);
  }

  /* angled gradient located in fixed circle at left/top corner,
     angle rotation will not change length of the gradient vector*/
  div.angle-gradient-dim
  {
    background: linear-gradient(40px/40px 40px/40px, 45deg, @START, @END);
  }

This way the gradient function will cover all practical cases where linear 
gradients
are required.

I also propose to limit color stops by using only percentages for defining
stop offsets:
<color-stop> = <color> [ <percentage> ]If it is possible to define 
explicitly start/end positions then lengths are not
needed there.


-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Saturday, 2 April 2011 22:07:46 UTC