W3C home > Mailing lists > Public > www-style@w3.org > August 2009

Re: Gradient syntax proposal

From: Brad Kemper <brad.kemper@gmail.com>
Date: Fri, 14 Aug 2009 14:27:06 -0700
Message-Id: <20E1AAB3-6BDB-499C-BF5A-B7A3DB6B51AA@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style list <www-style@w3.org>


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

> On Fri, Aug 14, 2009 at 3:01 PM, Brad Kemper<brad.kemper@gmail.com>  
> wrote:
>> On Aug 14, 2009, at 11:03 AM, "Tab Atkins Jr."  
>> <jackalmage@gmail.com> wrote:
>>> I don't see why the color *has* to come first, still.  Leaving it as
>>> it is, where you can specify them in either order.
>>
>> If you keep the ability to specify the starting point as a  
>> coordinate that
>> could contain percentages or lengths, then it can be very confusing  
>> to have
>> the first thing after be a percentage (or a length). Making the  
>> color as the
>> first item of the pair prevents that. If we get rid of the  
>> coordinate stops
>> then it's not s problem.
>
> Alternate idea: bring back the functional syntax for this.  ^_^
> "point(<bg-position) point(bg-position)" would work.  That way we're
> not introducing a sometimes-comma, and the complex lengths/percentages
> are clearly separated from the color-stops.

Using xy points is really not neccesary when 0% is always a corner or  
side, and 100% is always it's opposite corner.

> I'm really not averse to requiring [<color> <percentage>?], I just
> don't feel like restricting it unless necessary.

It's not neccesary if we get rid of the measurements before the first  
stop, as I've suggested.

>
>>> Also, leaving out <distance>.  Mixing percentages and distances  
>>> brings
>>> up the possibility (in fact, the certainty) of color-stops swapping
>>> their order based on box size.  I don't think that's desirable.  The
>>> only way around it would be to force the color-stops to be specified
>>> in order, and say that out-of-order stops are treated the same as
>>> same-position stops (they produce an instant transition from the  
>>> first
>>> specified to the last).  Would this be okay?
>>
>> I think it would be OK to have the starting and ending points as  
>> distances
>> or percentages, and have either percentages-only or distances-only in
>> between.
>
> I thought about allowing distances for the start/end points, but this
> produces an ambiguity.  Is 0%/100% defined by the first and last
> color-stop, or by <direction>?  If the former, how does this work when
> first/last color-stops have a %?

Usually, 0% would always be a corner or side, and 100% would always be  
it's opposite. But... I think that maybe if the first and last are  
both fixed lengths with percentages between them, then they could  
become the new 0% and 100%. But only in that case and no others. If  
that's too complicated then just don't mix at all.

>> Any distance that went beyond 100% would be clipped (unless we are
>> seriously going to define "running into a side" as being 100%.
>
> I can seriously see myself wanting to do "background:
> linear-gradient(-45deg inner, silver, white)" on a long article, as a
> little visual flourish that only affects the top of the block.

It seems kind of unpredictable or difficult to imagine where that  
would stop. I think you'd want more control. Like this:

background: linear-gradient(-45deg, silver 0, white 200px)

>
>> If you have the starting point and/or ending point as a distance,  
>> then you
>> don't need to use x/y coordinates for anything.
>
> I already tried and discarded this while writing my draft.  Putting a
> distance on the first color-stop is possible, but it then needs to
> actually redefine the starting-point of the gradient-line, and thus
> affect what % means in the other color-stops.

It doesn't have to. It COULD, in theory, as I described above. Or if  
you want to mix percentages and distances we don't have to do it like  
that. We could just allow percentages to continue to be based on the  
box. It's OK if they fall outside the box. I use the gradient tool in  
PhotoShop all the time to start the gradient outside the box.

> Putting a distance on
> the last stop doesn't work at all, because distance on a color-stop
> means how far away it is from the starting-point.

No, we could say that any fixed distance is always based on the box. I  
don't have a problem with that. Or that the last distance is based on  
the box (just like the first). Or that all distances are based on the  
box.

> You're trying
> instead indicate how far from the *original ending-point* the new
> ending-point should be.

No I'm not. I'm measuring from the starting point to say where the  
ending point should be.

>>>> Briefly, about "inner": I think it is very unusual. When I create  
>>>> an
>>>> angled
>>>> gradient box in PhotoShop, it fills the whole thing to all  
>>>> corners. It
>>>> does
>>>> not start in one corner and then just stop once it hits a side.  
>>>> That
>>>> would
>>>> be weird.
>>>
>>> In GIMP I have a choice.  I just click at the starting point, drag  
>>> to
>>> the ending point, and let go.  I can definitely see me wanting this
>>> type of gradient, especially as a visual effect at the top of an
>>> unpredictably tall box.
>>
>> You can do that in PhotoShop too, but it isn't the default for a  
>> gradient
>> fill. Even so, what you're talking about is setting starting and  
>> ending
>> points other than 0 and 100% (where it might also be handy to use  
>> distances
>> instead of percent). You aren't talking about a gradient that  
>> automatically
>> stops at a side.
>
> As stated up above, linear-gradient(-45deg inner, silver, white) could
> add an attractive flourish to the top of a long article.
> Similarly,
> linear-gradient(45deg inner, <color>, white) could be attractive at
> the bottom of a box.
>
>>> I agree, and that's how my proposal already handles it.  Before the
>>> first color-stop the color is the same as the first color-stop, and
>>> same with the last color-stop.
>>>
>>>> If you have named sides (like you do) and named corners  
>>>> (something like
>>>> border-radius has in its 4 names), then you don't need to mention  
>>>> the
>>>> opposite side at all. You also then don't need to use the bg- 
>>>> position
>>>> coordinate system with its possibility of 4 lengths separated by  
>>>> another
>>>> comma.
>>>
>>> Agreed; I've already changed to named corners based on your email.
>>>
>>> You do still need bg-position coordinates if you want anything more
>>> controlled than the angle or side-side/corner-corner gradients.
>>
>> No you don't.  You can do that by setting the distance from the
>> defined/implied corner/side for the start, and a distance from it's  
>> opposite
>> for the end. One number is simpler than two.
>
> How would you integrate this into the syntax?

I thought I said how already. You are just giving a measure from the  
starting corner or side (like all the other color-stops do), instead  
of one measure from the left and another from the top.

> I've hopefully
> explained up above why just putting these distances on the first/last
> color-stop doesn't work.

Nope. It can work. 
Received on Friday, 14 August 2009 21:28:10 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:20 GMT