From: Brad Kemper <brad.kemper@gmail.com>

Date: Thu, 13 Aug 2009 00:29:00 -0700

Cc: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>

Message-Id: <2F2E6E49-127C-433F-AACA-5898C248755D@gmail.com>

To: "robert@ocallahan.org" <robert@ocallahan.org>

Date: Thu, 13 Aug 2009 00:29:00 -0700

Cc: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>

Message-Id: <2F2E6E49-127C-433F-AACA-5898C248755D@gmail.com>

To: "robert@ocallahan.org" <robert@ocallahan.org>

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.Received on Thursday, 13 August 2009 07:29:43 UTC

*
This archive was generated by hypermail 2.4.0
: Friday, 25 March 2022 10:07:38 UTC
*