![]() ![]() Setting an interim color stop would probably bring it more in line. There’s a divergence around the 20-30% area, but it’s fairly minor. In the first, you can see that linear-gradient(90deg, blue, 66.6%, white) is pretty close to linear-gradient(90deg, blue, ease-in, white). With a massive assist from Tab Atkins, who wrote the JavaScript I put to use, I created a couple of CodePens to demonstrate this. If you’re up for the work it takes, it’s possible to get some close visual matches to cubic Bézier easing using the logarithmic easing we have now. And there are already defined keywords that are symmetric to each other, like ease-in and ease-out. This stands in contrast to cubic Bézier easing, where it’s easy to make symmetric easings as long as you know which values to swap. Regardless, its very nature means you can’t get perfect symmetry. It might even be mathematically impossible, though I’m no mathematician. The downside is that under this easing regime, it’s really hard to create symmetric non-linear line gradients. So the Working Group, rather sensibly, went with it. It was also what developers would likely need to match if they got handed a Photoshop file with eased gradients in it. (Not Mosaic, for once!) Adobe proposed adding non-linear midpoint easing to gradients, and they had an equation on hand that gave linear results in the default case. This logarithmic easing is used because that’s what Photoshop does. Linear-gradient(, blue, 10%, white, 90%, blue) Hover over the second gradient in the following example, where there are midpoints set at 10% and 90%, to switch it from 270deg to 90deg, and you’ll see that it’s only a match when the direction is the same. More to the point, there will be non-linear, asymmetrical easing. If the midpoint is anywhere other than exactly halfway between color stops, there will be non-linear easing. Still, in the general case, it’s a logarithm algorithm (which I love to say out loud). ![]() This is because the midpoint easing algorithm is based on logarithms, and is designed to yield linear easing for a 50% midpoint. In other words, linear-gradient(0deg, blue, white, blue) and linear-gradient(0deg, blue, 50%, white, 50%, blue) have the same effect. That’s the case here because the easing midpoints are halfway between the color stops - if you leave them out, then they default to 50%. That works out because the easing from color stop to color stop is, in this case, linear. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |