W3C home > Mailing lists > Public > www-style@w3.org > September 2012

Re: [css4-images] Reflected gradients

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 21 Sep 2012 13:29:24 -0700
Message-ID: <CAAWBYDBdh_8r=w_SuD-RMZaEjnSg4jB4LA_U=bU1j-dZcYu13A@mail.gmail.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:00 GMT