W3C home > Mailing lists > Public > www-style@w3.org > August 2005

Re: Gradients in CSS3?

From: Christoph Päper <christoph.paeper@tu-clausthal.de>
Date: Tue, 16 Aug 2005 18:41:32 +0200
Message-ID: <4302173C.2030306@tu-clausthal.de>
To: www-style@w3.org

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 

> 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()
   <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()
   <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");


   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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:20 UTC