- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Fri, 21 Sep 2012 13:29:24 -0700
- To: Lea Verou <lea@w3.org>
- Cc: www-style list <www-style@w3.org>
On Fri, Sep 21, 2012 at 7:17 AM, Lea Verou <lea@w3.org> wrote: > Conical gradients are a fantastic addition to Image Values [1]. However, > quite often, designers need to reflect a conic gradient, to avoid unwanted > hard lines at the point where 0deg meets 360deg. An easy way to reflect > gradients would be useful for any gradient type, but it’s especially > essential for conic gradients. Ah, thanks for the reminder. I've heard this request before, but haven't addressed it. Is it really necessary to support this in the syntax? A lot of the time it's just a matter of adding one or a few additional color-stops. It obviously becomes more necessary the more stops there are, particularly since you can't just copy-paste. > == Algorithm == > > One possible way it could work is convert the 0-100% range to 0-50% and flip > it for the 50-100% positions. Here are some examples: > > conic-gradient(white, black) becomes conic-gradient(white 0%, black 50%, > white 100%) > conic-gradient(white 20%, black 90%) becomes conic-gradient(white 10%, black > 45% 55%, white 90%) > conic-gradient(white -50%, black 150%) becomes conic-gradient(white -25%, > hsl(0, 0%, 75%) 50%, white 125%) > > I can write up a stricter definition if you’re interested. > > == Syntax == > > I see multiple options here: > 1. One option would be to add new functions like reflected-*-gradient(). I'd > suggest we avoid that, not only due to its lack of elegance but also because > we can't interpolate between different functions. and there is no reason to > prevent interpolation between reflected gradients and non-reflected > gradients. > 2. A keyword in the beginning (`reflected`?). For example: > linear-gradient(reflected to top left, white, black) > radial-gradient(reflected circle farthest-side at top left, white, black) > conic-gradient(reflected at top left, white, black) > 3. A keyword after the last color stop, like so: conic-gradient(white, > black, reflected) (3) is my initial preference, since this kind of thing is potentially useful for both normal and repeating gradient. ~TJ
Received on Friday, 21 September 2012 20:30:11 UTC