Re: Gradients in CSS3?

Ben Ward:
> Whilst I agree with you that this is perfectly possible to do with
> SVG, I also agree the others that providing *simple* gradients in CSS
> would be beneficial to the CSS developer base.

FWIW, I agree, like most participants here seem to do.

> * start colour
> * end colour
> * direction

Note that CSS has three units for degrees already.

> More complex gradients with defined start points, > 2 colours, etc.

Others added "weight" ((linear) distribution between start and end 
color, a percentage maybe) and "type" (x->y, x->y->x, radial etc., a 
keyword).

> really should be left for SVG, in my opinion, but something with a
> 'small' syntax would be nice.

The question is where to draw the line.

>    background-color: gradient(start-color, end-color, direction);

We could add another function to either colors or images like you suggest:

   <color>: keyword | hexadecimal | rgb() | ... | gradient()
or
   <image>¹: url() | gradient().

This function would be unique, because other functions may appear 
inside, e.g.

   background-color: gradient(rgb(0,0,0), #F00, 100grad);.

If that was allowed, you could perhaps solve the degree versus start and 
end point issue by reüsing <shape>, i.e. |rect()|, which is currently 
only used with |clip| and described there².


Alternatively (or even additionally) we could use @-rules that are 
referenced, either using the existing function |url()| or a new one, 
perhaps |symbol()|:

   @gradient id {...}
   <color>: keyword | hexadecimal | rgb[a]() | hsl[a]() | url()
or
   <image>¹: url(),

where |url()| can handle fragment identifiers (maybe after being told so 
by a second parameter like |attr()| in level 3), as in

   border-color: url("#id");

or

   border-image: url("id", fragment);.

This approach requires further properties (or descriptors) inside the 
at-rule. They should perhaps mimick SVG.


¹ <image> is not a CSS data type. It basically stands for <uri> here,
   where it is applied to an property ending in "-image".
² IMHO <shape> should be defined in chapter 4.3 "Values" in CSS2.
   I haven't checked where it is in the CSS3 modules.

Received on Tuesday, 16 August 2005 16:42:07 UTC