[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>` (https://drafts.csswg.org/css-images-3/#typedef-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
Posted by meyerweb on May 8, 2017, 4:10 PM
Tags
Related issues
Raise real-world problems, find people facing the same issue, and discuss solutions.4,500 issues0 comments
github (E-commerce)
proposal: cmd/cgo: cgo without a C toolchain
Replace PowerToys Run with Command Palette
VPS with a vRack leg
Possibility of Portal 1 Code Inclusion
Introducing NewPlayer
Metrics for PRs are never expiring ("memory leak")
ship even more of the compiler in source form
Flatpak Application TRACKING ISSUE
[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>` (https://drafts.csswg.org/css-images-3/#typedef-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
Comments (0)
No comments yet. Start the discussion.