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

[css3-images] conical-gradient()?

From: Lea Verou <leaverou@gmail.com>
Date: Mon, 21 Mar 2011 19:46:21 +0200
Message-ID: <4D878EED.2020604@gmail.com>
To: www-style@w3.org
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 
<http://www.google.com/images?q=conical+gradient&um=1&ie=UTF-8&source=og&sa=N&hl=en&tab=wi&biw=1280&bih=636> 
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)
Received on Monday, 21 March 2011 17:46:58 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:38 GMT