Re: Gradient syntax proposal

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.

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

Indeed, which is why you have multiple backgrounds.  That's in the
Backgrounds and Border module, you know.  If you need two backgrounds,
you should put in two backgrounds, not try and justify a hack where
you insert one of the backgrounds into a different painting layer.

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

I must admit, that code look horrifying.  ^_^  I'd much rather just
change the default rendering of <fieldset> and <legend> to make it
specifiable in CSS than do that.

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

Nah, we've got SVG for that.  Gradients are just used often enough
(seriously, a significant percentage of images on the web are
gradients) that it's worth it to port them into CSS even though you
*can* do them in SVG.

~TJ

Received on Friday, 14 August 2009 13:39:00 UTC