Re: [css3-images] conical-gradient()?

On Mon, Mar 21, 2011 at 10:46 AM, Lea Verou <leaverou@gmail.com> wrote:
> I've discussed this privately with Tab a while ago and since he thought it's
> a good idea, I figured I'd post it here to get wider feedback.
>
> Conical gradients (sometimes referred to as angle gradients) are gradients
> created by a line segment rotated around one of its endpoints (which forms
> the center of the gradient), while smoothly transitioning its color. There's
> not really a "gradient line" concept in those (like in linear or radial
> gradients), but an imaginary "gradient ellipse" instead, around the
> container box.
> Some visual examples of the effect can be found by googling its name.
> Those are quite common in graphic design, especially when combined with
> semi-transparent radial gradients on top. Photoshop and many other image
> editing applications offer such a gradient type out of the box. They are
> widely used in color pickers (for the hue wheel), starbursts, shiny metal
> textures and many other interesting effects. The twitter homepage also uses
> one on its header. Moreover, they can be used to make some patterns easier
> to code, like checkerboards.
>
> Its grammar could be something like:
> <conical-gradient> = conical-gradient(
>     [<bg-position>,]?
>     <color-stop>[, <color-stop>]+
> )
>
> <bg-position> having the same meaning as it does for radial gradients (where
> the center is).

I do think this is probably a good idea to pursue for Image Values 4.
It's the final major type of gradient commonly exposed by image
editors.

The only amendment I'd make to the grammar would be that I'd need a
new <conical-color-stop> or something that took an <angle> rather than
a <length> or <percentage> (neither of which make sense here, I
think).  I'd also have to make some decisions about what to do with
color-stops with angles outside the 0-360 range.  I guess they're
okay, just like negative-position color stops are okay for radial
gradients - they're not shown directly, but they can affect the
interpolation of colors.  So, for example, "conical-gradient(-90deg
white, black)" would do a fade from 20% gray to black.

My only question, then, is how easy this is to implement for browsers.
 I know that they rely on platform drawing libraries to do linear and
radial gradients (which is why I didn't put in my proposal for more
radial gradient shapes).  Do platform libraries support conic
gradients?

~TJ

Received on Monday, 21 March 2011 18:12:08 UTC