W3C home > Mailing lists > Public > www-style@w3.org > March 2011

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

From: Lea Verou <leaverou@gmail.com>
Date: Mon, 21 Mar 2011 20:26:29 +0200
Message-ID: <4D879855.1010006@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: www-style@w3.org
On 21/3/11 20:11, Tab Atkins Jr. wrote:
> 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).
Very good point about <length>, I totally forgot about it. Yes, an 
<angle> makes much more sense. However, I'm failing to see why a 
<percentage> doesn't. The way I was thinking about it, percentages would 
be directly converted to <angle>s, where 100% would be 360deg, 50% would 
be 180deg and so on. Yes, it seems redundant, but it could be convenient 
as a shortcut and many authors would expect them to work in conical 
gradients too 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

Lea Verou (http://leaverou.me | @LeaVerou)
Received on Monday, 21 March 2011 18:27:05 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:44 UTC