Quantcast

[css3-images] conical-gradient()?

classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

[css3-images] conical-gradient()?

Lea Verou
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).

-- 
Lea Verou (http://leaverou.me | @LeaVerou)
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Simon Fraser-4
On Mar 21, 2011, at 10:46 AM, Lea Verou 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).

One reason we've avoided these so far is that many of the OS graphics libraries don't support them. For example, Core Graphics on Mac is not able to render conical gradients. This makes performant implementations much more challenging.

Simon

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Tab Atkins Jr.
In reply to this post by Lea Verou
On Mon, Mar 21, 2011 at 10:46 AM, Lea Verou <[hidden email]> 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

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Lea Verou
On 21/3/11 20:11, Tab Atkins Jr. wrote:

> On Mon, Mar 21, 2011 at 10:46 AM, Lea Verou<[hidden email]>  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)


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

[css3-images] conical-gradient()?

Tab Atkins Jr.
In reply to this post by Tab Atkins Jr.
On Mon, Mar 21, 2011 at 11:24 AM, Lea Verou <[hidden email]> wrote:

> On 21/3/11 20:11, Tab Atkins Jr. wrote:
>> 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.

Ah, yeah, <percentage> would work.  Never mind me, then.

~TJ

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Rik Cabanier-2
In reply to this post by Lea Verou
Hi Lea,

I think it would be better to call this an angle gradient instead of conical.
Conical gradients are just a special case of a radial gradient where the midpoint of start and ending circle is different. (http://www.webkit.org/blog/175/introducing-css-gradients/ uses the term conic as well)

This seems like an edge case. Neither SVG or Illustrator implement such a construct so it must not be that common.
There has been a discussion on adding mesh gradients to SVG which would allow you to emulate a angle gradient.

Rik

On Mon, Mar 21, 2011 at 10:46 AM, Lea Verou <[hidden email]> 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).

-- 
Lea Verou (http://leaverou.me | @LeaVerou)

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Stephen Hay
> I think it would be better to call this an angle gradient instead of
> conical.

In Photoshop it is indeed often referred to as angle gradient (and
this is technically correct), although most designers I know
understand the term "conical". I actually think conical best describes
what the gradient does visually.

> Conical gradients are just a special case of a radial gradient where the
> midpoint of start and ending circle is different.

> This seems like an edge case. Neither SVG or Illustrator implement such a
> construct so it must not be that common.

I would call that a hasty generalization. Photoshop *does* implement
it, so making a similar generalization one could argue that since
there are more Photoshop users, it is very common.

> There has been a discussion on adding mesh gradients to SVG which would
> allow you to emulate a angle gradient.

This is indeed how they are emulated in Illustrator.

Regards,
Stephen Hay

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Rik Cabanier-2

> I think it would be better to call this an angle gradient instead of
> conical.

In Photoshop it is indeed often referred to as angle gradient (and
this is technically correct), although most designers I know
understand the term "conical". I actually think conical best describes
what the gradient does visually.

A conic radial gradient also resembles a cone. If we call them angle gradients, there is less chance of confusion.
 

> Conical gradients are just a special case of a radial gradient where the
> midpoint of start and ending circle is different.

> This seems like an edge case. Neither SVG or Illustrator implement such a
> construct so it must not be that common.

I would call that a hasty generalization. Photoshop *does* implement
it, so making a similar generalization one could argue that since
there are more Photoshop users, it is very common.

Are you advocating that we also add diamond gradients?
At one point I suggested adding focal point support to radial gradients.
This is a very common idiom which is supported by the WebKit gradients and core graphics but it was deemed to much of an edge case.

Rik

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Tab Atkins Jr.
On Tue, Mar 22, 2011 at 10:57 AM, Rik Cabanier <[hidden email]> wrote:

>
>> > I think it would be better to call this an angle gradient instead of
>> > conical.
>>
>> In Photoshop it is indeed often referred to as angle gradient (and
>> this is technically correct), although most designers I know
>> understand the term "conical". I actually think conical best describes
>> what the gradient does visually.
>
> A conic radial gradient also resembles a cone. If we call them angle
> gradients, there is less chance of confusion.

I don't much care about the name.  We can bikeshed over that in a year
or two when I start work on Image Values 4.


>> > Conical gradients are just a special case of a radial gradient where the
>> > midpoint of start and ending circle is different.
>>
>> > This seems like an edge case. Neither SVG or Illustrator implement such
>> > a
>> > construct so it must not be that common.
>>
>> I would call that a hasty generalization. Photoshop *does* implement
>> it, so making a similar generalization one could argue that since
>> there are more Photoshop users, it is very common.
>
> Are you advocating that we also add diamond gradients?

FWIW, I wanted to add square and diamond gradients.  You would just
pass in different keywords instead of 'circle' or 'ellipse'.  However,
creating them would require some hacking in graphics, like creating
four linear gradients and masking them together.  I decided they were
niche enough to not worry about them for now.

(If I added them today, I'd do them as a separate function, since you
can't interpolate from an elliptical to diamond gradient in such a way
that the intermediate forms can be sanely represented in CSS, or
efficiently constructed using platform graphics libraries.)


> At one point I suggested adding focal point support to radial gradients.
> This is a very common idiom which is supported by the WebKit gradients and
> core graphics but it was deemed to much of an edge case.

Indeed, and I still believe that to be true.  I'll revisit the issue
in Image Values 4.

~TJ

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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

Lea Verou
In reply to this post by Rik Cabanier-2
On 22/3/11 19:57, Rik Cabanier wrote:
> A conic radial gradient also resembles a cone.
Yes, but those are not supported by the standard radial gradient syntax
(unless I misunderstood what you're referring to) so I don't see how it
can be a source of confusion.
> If we call them angle gradients, there is less chance of confusion.
 From my small experience with that, most people think of linear
gradients with an angle when they hear the term "angle gradient", not of
conical gradients.


--
Lea Verou (http://leaverou.me | @LeaVerou)


Loading...