Re: Gradient syntax proposal

On Fri, Aug 14, 2009 at 4:44 PM, Andrew
Fedoniouk<news@terrainformatica.com> wrote:
> Brad Kemper wrote:
>>
>> On Aug 14, 2009, at 6:38 AM, "Tab Atkins Jr." <jackalmage@gmail.com>
>> wrote:
>>
>>> On Thu, Aug 13, 2009 at 10:59 PM, Andrew
>>> Fedoniouk<news@terrainformatica.com> wrote:
>>>>
>>>> Drawing in CSS uses two layers for background drawing: color layer
>>>> and image layer on top of it. So is my question.
>>>
>>> The layers are irrelevant.  Conceptually and realistically colors are
>>> substantially different from images.  You have no control over colors
>>> beyond just specifying them - they fill whatever you're doing.  A
>>> gradient is an image.
>>
>> We did earier discuss the idea of using gradients as a type of color, so
>> it could be used anywhere color values are used. But we decided against,
>> because there were just too many places where it wouldn't work.
>>
> I see no problems with having (yet another) function that define color. Now
> we have rgb(...) and I see no problems with having linear-gradient() as such
> a color.
>
> Rules are simple:
> 1) if color function by its nature defines more than one color then it is
> applicable only if it defines color of background of some *box* (e.g.
> element background, one of element borders, etc.).
> 2) each such a color function should have 'default' atomic color value: e.g.
> start  of gradient.
> 3) if color function is applied to the property that designates color of the
> stroke, e.g. [text-]color then used value is that default value of the
> function.

We *could* define rules like that.  I'm not sure why we'd want to,
though.  Just treating gradients like the images they are works fine.

> Having this we can define things like:
>
> background-color: linear-gradient(...);
> border-left-color: linear-gradient( top bottom, ... );
> border-right-color: linear-gradient( top bottom, ... );
> border-right-color: linear-gradient( top bottom, ... );
> column-rule-color: linear-gradient( top bottom, ... );
> etc.
>
> So color property accepts color function that defines distribution of colors
> in some box.

What would this look like?  Could you fill in some color values to the
function and give me a visual example?

> And reading Tab's proposal it is not clear how to redefine solid color for
> some element.
>   div { background: linear-gradient(...); }     div.solid { ??? what should
> be here to remove gradient ??? }

background-image: none;
or
background: <color>;

Exactly like removing an image (in the second case, because using the
shorthand resets background-image to the default).  Because that's
what a gradient is.

~TJ

Received on Friday, 14 August 2009 21:59:13 UTC