Re: [CSSWG] Minutes and Resolutions 2009-08-12

On Aug 12, 2009, at 6:54 PM, "Robert O'Callahan"  
<robert@ocallahan.org> wrote:

> The simplest possible case is a horizontal or vertical linear  
> gradient. In our syntax:
> background: linear-gradient(0 0, 100% 0, from(red), to(green));
>
> The only way I can see to really simplify without losing anything  
> would be to add two additional color arguments before the color  
> stops, which are the "from" and "to" colors. Then we eliminate  
> "from()" and "to()" from the syntax. That would make the above  
> example into
> background: linear-gradient(0 0, 100% 0, red, green);

"without losing anything" is probaby the key part of that. I don't  
want to lose any of the power either (or at least, not much), but the  
simplest case would be two colors and an angle. And, I suspect, that  
would probably cover a great majority of the uses in practice. Thus,  
that should also be the simplest and shortest form for authors to  
specify, with the default two stops in the the two opposite corners as  
defined by the angle, and all other value parts beyond these three  
optional.

I envision something like this:

gradient:
	[
		[<color> <color>]
		||
		[<color> <percentage>
		[, <color> <percentage>]+]
	]
	<angle-or-radius_limit>

and where < angle-or-radius_limit > is either an angle or a keyword.  
If an angle, then treat this as a linear gradient and:

<starting-percentage> and  <ending-percentage> are percentages  
(defaults of 0% and 100%), as measured from a corner
corner of origin depends on degrees (0-90 deg starts in lower-left,  
90-180 deg starts in lower-right, 180-270 deg starts in upper-right,  
and 270 to 360 deg starts in upper-left).
100% is a line that intersects the lower right corner, perpendicular  
to the specified angle.

Thus, an example of a very simple gradient would be:

{ gradient: white #666 -90deg; }
...which would also be the same as:
{ gradient: #ffffff 0%, #666666 100% 270deg; }
(that is, a gradient going from white at that top and gray at the  
bottom)

  An example with more stops:

{ gradient: white 0%, #666 50%, white 100% -90deg; }
(white at top, gray in the middle, white at the bottom)

gradients do not repeat. Thus this:
{ gradient: #fff 0%, #666 50% 0deg; }
is a gradient that goes from white on the left, to gray in middle, and  
then stays gray to the right.

If <angle-or-radius_limit> is not an angle then this is a radial  
gradient and:
the colors are listed from the inside out,
0% is the center of the rectangular shape it's applied to (a  
background painting area, for instance),
and  <angle-or-radius_limit > would be either:
"sides", meaning that 100% is an ellipse that fits entirely within the  
rectangular shape it's applied to.
"corners", meaning that 100% is an ellipse that the entire rectangular  
shape its applied to could inside of (with the gradient clipped to the  
edge of that rectangle, of course). In other words, the distances from  
center to each corner are ellipse radii.
"width-sides", meaning that 100% is a circle that extends to the width  
of the rectangular shape its applied to.
"height-sides", meaning that 100% is a circle that extends to the  
height of the rectangular shape its applied to.
"width-corners", meaning that 100% is a circle with a diameter equal  
to the distance between opposite corners of a square with the width of  
the rectangular shape its applied to.
"height-corners", meaning that 100% is a circle with a diameter equal  
to the distance between opposite corners of a square with the height  
of the rectangular shape its applied to.
"longest-sides", meaning that 100% is a circle that extends to the  
either the height or width (whichever is longest) of the rectangular  
shape its applied to.
"longest-corners", meaning that 100% is a circle with a diameter equal  
to the distance between opposite corners of a square with the height  
or width (whichever is longest)  of the rectangular shape its applied  
to.
"shortest-sides", meaning that 100% is a circle that extends to the  
either the height or width (whichever is shortest) of the rectangular  
shape its applied to.
"shortest-corners", meaning that 100% is a circle with a diameter  
equal to the distance between opposite corners of a square with the  
height or width (whichever is shortest)  of the rectangular shape its  
applied to.

{ gradient: white #666 corners; } would be a radial gradient going  
from white at the center to gray at the corners.

If you want a radial gradient that is not centered, then you could  
have one to two more length/percentage measures after the keyword to  
say where it goes. Like this:

{ gradient: white #666 corners 30%;  } which would be the same as:
{ gradient: white #666 corners 30% 30%; } or:
{ gradient: white 0%, #666 100% corners 30% 30%; }
which means the center of the radial starts at 30% of the height from  
the top and 30% of the width from the left.