Re: [css3-images] linear-gradient keywords and angles are opposite

At 10:46 -0700 6/9/11, Tab Atkins Jr. wrote:

>On Thu, Jun 9, 2011 at 10:33 AM, Brian Manthos <> wrote:

>>  And thus, finally, the root cause of the problem is obvious:  The 
>>spec as currently authored decided to choose "left/right the start 
>>location" instead of "left/right the direction".
>Yup, that's for historical reasons at this point - the first draft of
>linear gradients I wrote let you specify an explicit start point and
>end point for the gradient-line.  I stuck with that model as the
>syntax mutated and simplified.

    I still prefer the idea of defining start and end points and 
having the gradient lines be perpendicular to the line described by 
those points.  It's fairly unambiguous, it lets authors use any angle 
at any point within (or even outside) the background area, and it 
avoids the whole keyword confusion.  And it seems really easy and 
clear to animate as well.
    If we wanted to ensure the ability to use angles, then the syntax 
could be written so that an angle can be used for the second value. 
That would make the following equivalent:

    linear-gradient: 50% 50%, 100% 0, black, white;
    linear-gradient: 50% 50%, 45deg, black, white;

(Assuming a "0deg is the top" coordinate system, obviously.)
    And then if you wanted to animate so the gradient "rotated" to the 
upper left, you just animate the second value to '0 0' or '-45deg' or 
'315deg'.  Everything else stays the same.

Eric A. Meyer (

Received on Friday, 10 June 2011 01:27:16 UTC