[csswg-drafts] [css-images] Add easing functions to color stops

meyerweb has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images] Add easing functions to color stops ==
A recent CSS-Tricks article (https://css-tricks.com/easing-linear-gradients/) and subsequent Twitter discussion (https://twitter.com/stubbornella/status/861603397677359104) spurred me to file this request for Level 4.

In summary, linear gradients are not always visually acceptable.  This is particularly true when “fading out” a dark color to transparent.  The article describes how to set up a bunch of color stops to ease out the gradient.  A much better solution would be to add easing functions to all color stops after the first, with a `linear` default for backward compatibility.

The example in the article could be approximated like this:

```
linear-gradient(to bottom, black 0%, transparent 100% ease-in-out);
```

…instead of the 11 color stops used to get the effect.  (Note that I don’t claim this would be a precise match; a `cubic-bezier()` easing would most likely be required for that.  But it would be close.)

This would change the definition of `<color-stop>` from:

```
<color-stop> = <color> <length-percentage>?
```

…to the following at a minimum:

```
<color-stop> = <color> <length-percentage>? <timing-function>?
```

As an author, I would probably prefer:

```
<color-stop> = <color> [ <length-percentage> || <timing-function> ]?
```

…since that would allow me to write the easing and distance in whichever order I liked.  (For that matter, I’d prefer to be able to write all three in any order, but I don’t know if that would upset any implementors’ apple carts.)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1332 using your GitHub account

Received on Monday, 8 May 2017 16:10:49 UTC