Re: Gradients in CSS3?

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 UTC