Re: [css4-images] Reflected gradients

On Fri, Sep 21, 2012 at 7:17 AM, Lea Verou <> 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.


Received on Friday, 21 September 2012 20:30:11 UTC