W3C home > Mailing lists > Public > www-style@w3.org > November 2011

Re: [css3-images] Making gradients readable

From: Brad Kemper <brad.kemper@gmail.com>
Date: Fri, 4 Nov 2011 06:24:44 -0700
Message-Id: <10F5E256-0898-4803-9305-45CEFB4485F9@gmail.com>
Cc: "www-style@w3.org" <www-style@w3.org>
To: fantasai <fantasai.lists@inkedblade.net>

On Nov 4, 2011, at 2:06 AM, fantasai <fantasai.lists@inkedblade.net> wrote:

> On 11/01/2011 03:33 PM, L. David Baron wrote:
>> On Sunday 2011-10-30 22:25 -0700, fantasai wrote:
>>> So I propose for radial-gradient() is to use keywords to denote the various types of
>>> arguments, thus:
>>> 
>>>   radial-gradient(from center as red, orange, yellow)
>>> 
>>>   radial-gradient(from top left as red, orange, yellow)
>>> 
>>>   radial-gradient(circle from 25% 17% as red, orange, yellow)
>>> 
>>>   radial-gradient(3em 5em from 1em 2em as red, orange, yellow)
>>> 
>>> Generically, the proposed syntax is:
>>> 
>>>   radial-gradient(<shape-info>
>>>                    from<position>
>>>                    as<color-stop>  [,<color-stop>]+ )
>> 
>> So there's one thing I don't like about this and another that I
>> think could be improved.
>> 
>> The thing I don't like is that, in general, I don't like something
>> that looks like this:
>> 
>>   function(foo bar as a, b, c)
>> 
>> because I think when you have commas inside of functions, it's
>> natural to split it like this (because many languages separate
>> things inside functional syntax with commas):
>> 
>>    foo bar as a
>>    b
>>    c
>> 
>> rather than splitting it as:
>>    foo bar
>>    a, b, c
>> 
>> I thus prefer replacing the "as" with a ",".
>> 
>> 
>> Second, I think the<shape-info>  really has two parts -- there's a
>> shape and a size (or extents).  I wonder if this could be recast as:
>> 
>>   radial-gradient(<shape>?
>>                    from<position>
>>                    to<extents>
>>                    [,<color-stop>] + )
>> 
>> Where:
>> 
>>  <shape>  is ellipse or circle, and defaults to ellipse
>> 
>>  <position>  is as you describe it
>> 
>>  <extents>  is:
>>    closest-corner
>>    closest-side
>>    farthest-corner
>>    farthest-side
>>    or an explicit size (one number for a circle, two for an ellipse)
>> 
>> I could see the 'from' keyword also being 'at'.
>> 
>> (The 'from'-part and the 'to'-part seem like they could be reversed
>> if desired.)
> 
> I think this is a good proposal, too. Wrt 'from' vs 'at', I think we
> might want to think about what the syntax for offset radial gradients
> would look like. I think 'from' gives a strong sense of the colors
> moving away from that point, so I'd use it for the focus of the
> gradient rather than the center of the ellipse. I'm not sure what you'd
> use to define the center of the ellipse -- you want to express the
> concept of "centered at".

Well, if you have something like this in current syntax:

Radial-gradient(20% 20%, 50px 30px, white, black)

it means that the 50px wide, 30px tall gradient ellipse and it's center point are moved over together, so that the center aligns with the 20% 20% point of the image box, and you just see more of the 100%+ color-stop color on the other side. In dbaron's syntax, this would be:

radial-gradient(from 20% 20% to 50px 30px, white, black)

 IF we were to later add the ability to have non-symmetrical radials, with the start of the gradient off-center from the ending ellipse (still a big "if" in my mind), then I think it could be handled with an additional keyword to add to the beginning of <shape>, such as:

radial-gradient(asym from 20% 20% to 50px 30px, white, black)

which would mean that the center point of the 50px wide, 30px tall gradient ellipse is moved over independently, so that it aligns with the 20% 20% point of the ellipse and image box (thus, no clipping occurs).
Received on Friday, 4 November 2011 15:04:46 GMT

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