Re: [css3-images] my take on linear gradients

?--------------------------------------------------
From: "Brad Kemper" <brad.kemper@gmail.com>
Sent: Friday, October 22, 2010 10:02 AM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: "www-style list" <www-style@w3.org>; "Tab Atkins Jr." 
<jackalmage@gmail.com>
Subject: Re: [css3-images] my take on linear gradients

>
> On Oct 20, 2010, at 10:47 PM, Andrew Fedoniouk wrote:
>
>> ?--------------------------------------------------
>> From: "Brad Kemper" <brad.kemper@gmail.com>
>> Sent: Wednesday, October 20, 2010 9:47 PM
>> To: "www-style list" <www-style@w3.org>
>> Cc: "Tab Atkins Jr." <jackalmage@gmail.com>
>> Subject: [css3-images] my take on linear gradients
>>
>>> I have written and uploaded my thoughts on the linear-gradient draft. I 
>>> start out with assumptions about what I think is important for any 
>>> linear gradient syntax, then I examine how well these goals are met by 
>>> the current syntax, and finally I say what I would change and how that 
>>> would make it better. You can read it all here:
>>>
>>> http://www.bradclicks.com/cssplay/linear-gradient/index.html
>>>

...

>>
>> Here is my note.
>>
>> All gradient samples you use in your document can be presented by using
>> colors-in-corners schema. Imagine that we have background-color property
>> that allows to define colors in corners of rectangle:
>> background-color: color | < top-left-color top-right-color 
>> bottom-right-color bottom-left-color>
>>

...

>
> Yes, it is pretty simple and uses a familiar syntax. But I think it is not 
> quite powerful enough. While I do expect two-color gradients to be the 
> most common, I think 3-color gradients will also be a pretty common need. 
> Also, I would want to be able to handle gradients with a set length in 
> them, as this is what has been available for many years via raster 
> background images. So, for instance:
>
> linear-gradient(90deg, orange, white 200px)
> linear-gradient(90deg, orange, orange 200px, white)
>
> I feel strongly that the degree notation is the simplest and most familiar 
> way to specify a gradient via text entry, and that is why degrees are used 
> almost universally for text entry of gradients in graphics programs that 
> offer that. With the addition of my proposed keyword, it offers all the 
> power needed for at least 99% of the cases IMO, with no need for a 
> separate <bg-position> version, and with SVG filling in for the more 
> extreme edge cases.
>

How about this:

1) To extend background-color property in CSS by that four-colors
solution. That will cover all simple cases.

And/or

2) To add, let's say, @ rule[s] like

@linear-gradient SomeName
{
   start: 10px 10px;
   angle: 90deg; // or
   // end: 10px 10px;
   // length: 10px;
   colors: red/0% blue/50% maroon/100%;
}

That can be applied as
some.element
{
   background-image: url(#SomeName);
}

@-form of defining gradient [functions] has greater
potential - at least you can define named arguments.

Actually uur discussions about gradients just shows that
we've reached some limits with functional notation in CSS.

Probably we shall start thinking about adding named arguments
to functions. So we will be able to write something like this:

background:
   linear-gradient(
      start: 10px 10px,
      angle: 90deg,
      colors: red/0% blue/50% maroon/100% ) no-repeat;

So far CSS has only one level of name/value declarations.
Named arguments in functions allow to use such lists
for other entities in pretty humanistic manner.


-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Saturday, 23 October 2010 03:34:34 UTC