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

Re: Gradients in CSS3?

From: Slalomsk8er <slalomsk8er@solnet.ch>
Date: Mon, 15 Aug 2005 21:25:39 +0200
Message-ID: <4300EC33.9090707@solnet.ch>
To: www-style@w3.org

Ben Ward wrote:

>>That seems to me to be straying into the area of SVG.
>>    
>>
>
>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. The effort of producing
>an image for a simple gradient is quite undesirable.
>
>To define simple, I mean:
>* start colour
>* end colour
>* direction
>
>More complex gradients with defined start points, > 2 colours, etc.
>really should be left for SVG, in my opinion, but something with a
>'small' syntax would be nice.
>
>As for syntax, perhaps:
>   background-color: gradient(start-color, end-color, direction);
>
>Where the colours can be any valid CSS colour value, and direction is
>specified in degrees (0-259).
>
>I wouldn't want anything more complex that that. By way of example,
>Microsoft are currently using their proprietary gradient filter on
>their homepage (microsoft.com, IE only) to nice effect. The syntax is
>ghastly, but the actually effect very simple and effective.
>
>Ben
>http://ben-ward.co.uk
>  
>
gradient(type, start-color, end-color, weight, offset, direction);

type can be one of the following (look at GIMPs Blend tool):
Linear (lin)
Bi-Linear (bi-lin)
Quadratic (quad)(see texture tool blend in the software from blender3d.com)

Radial[-bi-lin|-quad] (lin is the default)
Square[-bi-lin|-quad]
Shaped[-bi-lin|-quad] (box)

weight:
two integers
fist color part (1) second color part (2) (1 2 means the second colors weight is double the weight of the first color)

offset:
% of gradient distance till start of gradient


direction:
degrees
words (topleft to bottomright)
inside out (Shape)
outside in (Shape)

This would be all a webmaster can hope for in CSS ;)
Spiral gradients and other "cool" stuff needs to be implemented in the Website via SVG.

Maybe a list of colors for a gradient would not be that much more code to implement.


Dominik
Received on Monday, 15 August 2005 17:25:45 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:40 GMT