Re: radial-gradient() proposal

On 05/11/2009, at 12:41 PM, Simon Fraser wrote:

> 	I think my real unease here stems from my desire to see a linear  
> gradient specified precisely by the end points, and having a simple  
> way to deduce the end point from the angle. So I propose the  
> following.
>
> 	A linear gradient is specified by two points, and optionally an  
> angle. In the absence of the angle, those two points are the  
> endpoints of the gradient. If the angle is present, then the start  
> point of the gradient is the first point and the axis of the  
> gradient is given by the angle. The endpoint of the gradient is  
> obtained by finding the point on a line perpendicular to the axis  
> which intersects with the second specified point.
> 	If no point is specified, the start point is assumed to be the top  
> left (and thus the second point is bottom right).
> 	If only one point is specified, then the second point is obtained  
> by reflecting the first point about the center of the box.
> 	If the second specified point lies on a line from the first point  
> with the specified angle, then the gradient renders as a solid color  
> using the color of the last(?) stop.

I like this proposal over the current one on dev.w3.org. As I  
mentioned to Simon directly, I'd like a small change.

>
> This gives the following behavior:
>
> 	linear-gradient(yellow, blue) -- start point defaults to top left,  
> reflect about center to get an end in the bottom left: get diagonal  
> gradient.

Agree that this is the best default (although, typo - you meant bottom  
right)

> 	linear-gradient(left, yellow, blue) -- horizontal gradient from  
> left to right

I would expect this to be the same as the default case - I assume  
"left" == "top left". But, since you're trying to be compatible with  
background position, you're making "left" == "center left". I think it  
is strange to have the default case be a different rule between not  
specifying a point and specifying half a point. I'd prefer the default  
cases to be understandable fallbacks.

So, my suggestion is:

linear-gradient(yellow, blue) - diagonal from top left to bottom right
linear-gradient(top, yellow, blue) - same
linear-gradient(left, yellow, blue) - same
linear-gradient(left, right, yellow, blue) - horizontal from left to  
right
linear-gradient(top, bottom, yellow, blue) - vertical from top to bottom

The last two have the advantage of being clearly readable/ 
understandable when read aloud, yet not verbose.

linear-gradient(top right, bottom left, yellow, blue) - diagonal from  
top right to bottom left

I also would resist the temptation to change the direction of rotation  
for angles, just because it seems more familiar to some people. The  
Web has a standard convention that we should follow.

Dean

> 	linear-gradient(top, yellow, blue) -- vertical gradient from top to  
> bottom
> 	linear-gradient(top left, bottom right, yellow, blue) -- end points  
> are specified, get diagonal gradient.
> 	linear-gradient(10% 20px, yellow, blue) -- diagonal gradient from  
> 10% 20px to 90% (height - 20px)
> 	linear-gradient(45deg, yellow, blue) -- start point is top left,  
> end point is bottom right, get 45deg gradient.
>
> This still has the nice "fill the box" properties, and allows a lot  
> of common gradient types without having to use the angle argument.  
> There still isn't a single canonical form -- the angle is  
> "absolute", 0deg being up (I think; the current proposal doesn't  
> say), so saying that the angle defaults to 0 does not work.  
> Specifying the angle as relative to the line between the end points  
> doesn't help either, because then you can no longer maintain a 45deg  
> gradient as the end points move around.
>
> This form also still has ambiguous parsing of:
> 	linear-gradient(0, yellow blue)
> and similar, where the 0 can be parsed as a position or angle,  
> unless we require angle units.
>
> I haven't thought about radial-gradient yet, but I do see that the  
> current radial gradient proposal does not allow the author to place  
> a radial gradient in an arbitrary spot that does not necessarily  
> touch the edges or corners of the box. I think this use case is  
> important, for example content that wants to put a gradient on the  
> <body> that creates a glow around some element on the page.
>

Received on Thursday, 5 November 2009 22:16:37 UTC