W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2017

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

From: Andreas Larsen via GitHub <sysbot+gh@w3.org>
Date: Fri, 12 May 2017 19:41:57 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-301168344-1494618116-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.3.1 : Monday, 23 October 2017 10:12:53 UTC