Re: Gradient syntax proposal

On Wed, Aug 19, 2009 at 9:49 AM, Brad Kemper<brad.kemper@gmail.com> wrote:
>
> On Aug 19, 2009, at 7:19 AM, James Elmore wrote:
>
>>> I'm just thinking there would be times when you wanted a gradient a fixed
>>> distance from the end, not just the beginning, not necessarily a mirror of
>>> the beginning measurement, so it would be nice to have a way to specify that
>>> without a lot of calc(), which is even harder to read. A second slash
>>> version doesn't seem so bad for that. Basically just a slash instead of a
>>> comma there.
>>>
>>
>> I was thinking last night (away from my beloved computer so I could not
>> send immediately ;) and thought about the possibility of using negative
>> numbers for both percentages and lengths. Positive values are distances /
>> percentages of the length FROM THE START of the gradient line; negatives are
>> FROM THE END of the line. This makes the gradient syntax simpler -- no extra
>> slash.
>
> That was actually my first idea, before I came up with the second slash
> idea. But it means changing what the tokens mean for unit measurements,
> which can complicate the implementation, I think. But more importantly (to
> me), I might actually want negative percentages and lengths to represent
> color stops that are outside the box. I find that it is not uncommon when
> working in PhotoShop on gradients, to start dragging the gradient tool from
> outside one edge, and let it up outside of the opposite edge.

Agreed - I do the same.  I mean, you could always just figure out
precisely what the color you want to start/end on is and go to that
instead, but it can often be easier to us a major color (a named one,
or one that is used often in your design) and just start/end it
outside of the box.

> In other words, I can use the distance of the first and last color stops
> control how pure the first and last colors you actually see are. For
> example:
>
> linear-gradient(top / white -20%, yellow 50% / black -30%)

Or, of course, just linear-gradient(top / white -20%, yellow 50%, black 130%)

~TJ

Received on Wednesday, 19 August 2009 15:06:33 UTC