Re: Gradient syntax proposal

Tab Atkins Jr. wrote:
> On Thu, Aug 13, 2009 at 9:30 PM, Andrew
> Fedoniouk<news@terrainformatica.com> wrote:
>> Tab Atkins Jr. wrote:
>>> Just linear gradients for now:
>>>
>>>
>>> http://www.xanthir.com/document/document.php?id=d65df9d10442ef96c2dfe5e1d7bbebf7aa42f2bcf24e68fc3777c4b484fa8a4ce55fed2189cac20ccad8686127f4c08917c4ca8b7614e9f89c2a950ec083a9c6
>>>
>>> ~TJ
>>>
>>>
>> So what exactly is this gradient? Is it such a color or is it rather such an
>> image?
>>
>> Consider this case:
>>
>> div.first
>> {
>>  background: linear-gradient(top bottom, yellow, blue);
>>  background-color: green;
>> }
>>
>> div.second
>> {
>>  background: linear-gradient(top bottom, yellow, blue);
>>  background-image: url(something.png);
>> }
>>
>> <div .first>Any gradient here?</div>
>> <div .second>And here?</div>
>>
>> I suspect it is a color or more precise something like background-fill,
>> correct?
>>
>> And why just not:
>> background-image: url(gradient.svg);
>> at the end of ends?
> 
> This is just a continuation of the gradient discussion that's going on
> on the list *right now*.
> 
> A gradient is a browser-generated image.  It's usable exactly anywhere
> an image can be used.  Thus in your examples, div.first has a
> gradient, div.second does not (because it's been overridden by the
> subsequent background-image declaration).  Gradients cannot be colors
> - colors are 0-dimensional, but gradients are 1-dimensional (in
> practice, 2-dimensional).

'color' designates drawing layer rather than rgb() here.

Drawing in CSS uses two layers for background drawing: color layer
and image layer on top of it. So is my question.

Having background-image to be replaced by the gradient will discard 
cases like:

background-color: gradient(linear-gradient(top bottom, yellow, blue);
background: url(...png) repeat-x 0% 100%;

Which are IMO quite useful.

> 
> Yes, svg can do the same thing and more.  But gradients are
> *extremely* common in websites, so much so that it's worthwhile to
> duplicate them in CSS.
> 

That's funny, at the moment I am working on so called csss.draw! module 
for the htmlayout. It extends CSSS! [1] feature that I already have there.

Here is an example of how <FIELDSET>/<LEGEND> drawing can be defined

@drawing FIELDSET-BACK
{
   legend = self.$1(:root>legend),
   legend?
    ( exclude( label ),
      rect( x:0.5, xe:0.5,
            y: legend.box-border-top() +
               legend.box-border-height() / 2 + 0.5,
            ye:0.5,
            r:3 )) #
     rect( x:0.5, xe:0.5, y:0.5, ye: 0.5, r:3),
     cancel; /* discard default background drawing */
}

/* will draw rounded rect with the top line underneath the legend
    but not through it */

fieldset
{
    draw-background!: FIELDSET-BACK();
}

As you know <FIELDSET>/<LEGEND> drawing:
http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_fieldset
cannot be defined in terms of CSS. At all. But ideally it should be
possible to define rendering of *any* HTML5 element solely by CSS.

That csss.draw! feature also supports gradients:

grad-left = linear-gradient( x:0%, y:0%, xe:100%, ye:100%, red, blue ),
grad-right = linear-gradient( x:100%, y:0%, xe:0%, ye:100%, red, blue ),
   rect( x:0, y:0, xe: 50%, ye:0, grad-left ),
   rect( x:50%, y:0, xe:100%, ye:0, grad-right );

It will draw this:
http://terrainformatica.com/w3/grad2.png

In my opinion the solution for gradients should be extendable and
cover the whole class of drawings ( e.g. fractal-cloud(...) ) and
drawing sequences.

[1] http://www.terrainformatica.com/htmlayout/csss!.whtm
     http://www.terrainformatica.com/htmlayout/csss!-dom-object.whtm

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 14 August 2009 04:00:11 UTC