Re: Gradient syntax proposal

Sent from my sef-aware iPhone

On Aug 14, 2009, at 4:35 PM, "Tab Atkins Jr." <jackalmage@gmail.com>  
wrote:

> On Fri, Aug 14, 2009 at 6:24 PM, Brad Kemper<brad.kemper@gmail.com>  
> wrote:
>>>> If I wanted to start say, 30% from the top, and end at the  
>>>> bottom, I
>>>> would
>>>> write that as "linear-gradient(top, green 30%, blue 20%, navy)".  
>>>> Or if I
>>>> wanted to be a few degrees off from straight down, I would do
>>>> "linear-gradient(-87deg, green 30%, blue 20%, navy)". I think  
>>>> these are
>>>> both
>>>> much cleaner, and provide all that an author will really need.
>>>
>>> All right, changed my mind.  That looks confusing as *hell*.  It  
>>> looks
>>> like you meant to write "blue 20%, green 30%, navy" but swapped them
>>> for some reason.
>>
>> What? Why? Wasn't green her first color? Wasn't it supposed to  
>> start 30%
>> from the top?
>
> Depends.  As written, it seems like you intend the gradient to go
> blue-green-black, but just wrote the colors out of order.

I don't know why you would think that. Look, here is what fanasai wrote:

linear-gradient(
    10px 30% to
    100% 4%,
    green,
    blue 20%,
    navy
);
>


I take that to mean: starting at a point 10px to the right and 30%  
from the box top, begin the gradaition with green. Then 20% between  
that point and the ending color, it should be blue. Then the gradation  
ends with navy at 100% from left and 4% from the top (which may be  
higher or lower than the green, depending on box size).

I find that confusing and much more exact than what anyone will need  
for the starting and ending points. In fact, I got confused into  
thinking the 100% was vertical. So it is mostly left-right, not up- 
down, though I couldn't tell you what angle, so I don't know why I'd  
need to have start and end points like that. Anyway...

Here is what I had as a first alternative (which I realize is not  
exactly the same, but a more likely use case and easier for me to  
conceptualize and write or edit). Just suppose I am trying to come  
close to 4% 100% at the end instead of 100% 4%:

linear-gradient(
    top,
    green 30%,
    blue 20%,
    navy
)

So this would mean: starting at a point 30% from the box top, begin  
the gradaition with green. Then 20% down from the box top, it should  
be blue. Then the gradation ends with navy at 100% from  the top.

But since fantasai's example had a slight angle to it, and since I  
would as an author probably know how about how much I'd want that  
angle to be, I gave a second alternative using angle:

linear-gradient(
    -87deg,
    green 30%,
    blue 20%,
    navy
)

This means: starting at a point 30% from the box top-left and going  
down and slightly to the right, begin the gradation with green at 30%  
of the way from that corner along that angle (towards where it would  
need to go at that angle to fill  the opposite corner). Then 20% down  
from the box top-left, it should be blue. Then the gradation ends with  
navy at the end of that angled path (a line of navy that intersects  
the lower right corner).

> Did you
> intend to write "blue 50%"?

OK. I see. 30% + 20% would be closer to where her blue is. Sure. Me  
math-adverse sometimes.

> Or did you really mean for blue to be 20%
> between green and black (that is, 44% down from the top)?

Assuming you mean "between green and navy", since black was never  
mentioned.  No, that's not what I meant. I prefer not to swich which  
length things are a percentage of.

>
>>> I don't like it at all.
>>
>> Mine was simpler.
>
> Heh, possibly.  Possibly not.  If a % means different things based on
> whether it's used in a terminal color-stop or a middle color-stop,
> then it's much more confusing.

Yeah, put that idea out of your mind.