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 13:01:36 -0700
Message-Id: <10147896-C29A-4B82-B8D5-64C5E7F98BE7@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style list <www-style@w3.org>
On Aug 14, 2009, at 11:03 AM, "Tab Atkins Jr." <jackalmage@gmail.com>  
wrote:
>> .
>> I think this can be improved significantly in a way that makes  
>> everything
>> more clear, by using the following change:
>>
>> linear-gradient(
>>
>> [
>>
>>  <angle>
>> |
>>  [ top-left | top-right | bottom-right | bottom-left | top | bottom  
>> | right
>> | left ]
>>
>> ]
>
> Hmm, I like the corners being specified as separate keywords.   
> Changed to that.
>
>> <color-stop>, <color-stop>
>>
>> )
>>
>> <color-stop> is [<color> [<percentage>|<distance>]*],
>
> FYI, you want a ? there, not a *.

Yes, you're right.

> 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.

> 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. Any distance that went beyond 100% would be  
clipped (unless we are seriously going to define "running into a side"  
as being 100%.

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.

>
>> Thus, these go from blue in the lower left corner at a 45 degree  
>> angle until
>> the last line of the gradient intersects the opposite corner:
>> linear-gradient(45deg green, blue)
>>
>> linear-gradient(45deg green 0%, blue 100%)
>>
>> These start in the same corner and continue directly towards the  
>> opposite
>> corner (along an angle that would be a line connecting those  
>> corners):
>>
>> linear-gradient(bottom-left green, blue)
>>
>> linear-gradient(bottom-left green 0%, blue 100%)
>>
>> These start in the bottom and continue towards the top:
>>
>> linear-gradient(bottom green, blue)
>>
>> linear-gradient(bottom green 0%, blue 100%)
>>
>> Adding stops then is very consistent:
>>
>> linear-gradient(bottom green, white, orange, blue)
>>
>> linear-gradient(bottom green 0%, white 33.3%, orange 66.6%, blue  
>> 100%)
>
> Dropping the comma separating the direction from the stops just looks
> crazy.  I'll keep it there.

Meh. OK. I could go either way, as long as it's the only comma other  
than those separating color-stops.

>
>> 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.

>
>> If you did want the length of the blend to be a certain distance
>> that is consistent between two boxes of the same width, then just  
>> use an
>> absolute distance measure instead of 100%.
>> On another note, I think that if the beginning and ending stops are
>> specified as >0% and <100% respectively, then their starting and  
>> ending
>> colors should fill the space between those corners and the points  
>> at which
>> there is actual gradation. Don't just leave those areas  
>> transparent. In the
>> unusual event that you  DO want transparency there, you could do  
>> this:
>
> 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. 
  
Received on Friday, 14 August 2009 20:02:33 GMT

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