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

I've quickly updated the playground to support the syntax proposed by @AmeliaBR e.g. 
```
linear-gradient(black, cubic-bezier(0.48, 0.30, 0.64, 1.00), transparent)
```
NB - the plugin has some limits for now: 
* hacks by creating many color stops and as such might have some artefacts.
* only supports `cubic-bezier()`, `ease`, `ease-in`, `ease-out`, `ease-in-out` but adding `steps()` should be fairly trivial. 
* doesn't yet support `color-stop-positions` but should also be easy to add.

http://codepen.io/larsenwork/pen/WjJorb?editors=0100

@tabatkins I haven't been able to easily recreate the curve in the example with hints (but again I'm not too familiar with the approach). 
Basically I wanted a gradient that faded out nicely but also had a modified s-shape to avoid being too dark in top. Creating an asymmetrical s-shape like that with `cubic-bezier()` is much more intuitive than trying to balance out three color-stops with two hints even if it's possible to get something visually similar that way (I wasn't). I've never been satisfied with the gradient options in Photoshop and know designers who either stack gradients, use gaussian blur or other "hacks" to create visually pleasing gradients.

-- 
GitHub Notification of comment by larsenwork
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1332#issuecomment-301168344 using your GitHub account

Received on Friday, 12 May 2017 19:42:04 UTC