- From: Brad Kemper <brad.kemper@gmail.com>
- Date: Fri, 4 Nov 2011 06:24:44 -0700
- To: fantasai <fantasai.lists@inkedblade.net>
- Cc: "www-style@w3.org" <www-style@w3.org>
On Nov 4, 2011, at 2:06 AM, fantasai <fantasai.lists@inkedblade.net> wrote: > On 11/01/2011 03:33 PM, L. David Baron wrote: >> On Sunday 2011-10-30 22:25 -0700, fantasai wrote: >>> So I propose for radial-gradient() is to use keywords to denote the various types of >>> arguments, thus: >>> >>> radial-gradient(from center as red, orange, yellow) >>> >>> radial-gradient(from top left as red, orange, yellow) >>> >>> radial-gradient(circle from 25% 17% as red, orange, yellow) >>> >>> radial-gradient(3em 5em from 1em 2em as red, orange, yellow) >>> >>> Generically, the proposed syntax is: >>> >>> radial-gradient(<shape-info> >>> from<position> >>> as<color-stop> [,<color-stop>]+ ) >> >> So there's one thing I don't like about this and another that I >> think could be improved. >> >> The thing I don't like is that, in general, I don't like something >> that looks like this: >> >> function(foo bar as a, b, c) >> >> because I think when you have commas inside of functions, it's >> natural to split it like this (because many languages separate >> things inside functional syntax with commas): >> >> foo bar as a >> b >> c >> >> rather than splitting it as: >> foo bar >> a, b, c >> >> I thus prefer replacing the "as" with a ",". >> >> >> Second, I think the<shape-info> really has two parts -- there's a >> shape and a size (or extents). I wonder if this could be recast as: >> >> radial-gradient(<shape>? >> from<position> >> to<extents> >> [,<color-stop>] + ) >> >> Where: >> >> <shape> is ellipse or circle, and defaults to ellipse >> >> <position> is as you describe it >> >> <extents> is: >> closest-corner >> closest-side >> farthest-corner >> farthest-side >> or an explicit size (one number for a circle, two for an ellipse) >> >> I could see the 'from' keyword also being 'at'. >> >> (The 'from'-part and the 'to'-part seem like they could be reversed >> if desired.) > > I think this is a good proposal, too. Wrt 'from' vs 'at', I think we > might want to think about what the syntax for offset radial gradients > would look like. I think 'from' gives a strong sense of the colors > moving away from that point, so I'd use it for the focus of the > gradient rather than the center of the ellipse. I'm not sure what you'd > use to define the center of the ellipse -- you want to express the > concept of "centered at". Well, if you have something like this in current syntax: Radial-gradient(20% 20%, 50px 30px, white, black) it means that the 50px wide, 30px tall gradient ellipse and it's center point are moved over together, so that the center aligns with the 20% 20% point of the image box, and you just see more of the 100%+ color-stop color on the other side. In dbaron's syntax, this would be: radial-gradient(from 20% 20% to 50px 30px, white, black) IF we were to later add the ability to have non-symmetrical radials, with the start of the gradient off-center from the ending ellipse (still a big "if" in my mind), then I think it could be handled with an additional keyword to add to the beginning of <shape>, such as: radial-gradient(asym from 20% 20% to 50px 30px, white, black) which would mean that the center point of the 50px wide, 30px tall gradient ellipse is moved over independently, so that it aligns with the 20% 20% point of the ellipse and image box (thus, no clipping occurs).
Received on Friday, 4 November 2011 15:04:46 UTC