Type designers throughout history have been obsessed with smooth curves. Intersection outside of Sagamihara, Japan by Inspiration: Typography The image below is an example of how gradual changes the changes are in the curvature of highways. We can thank Euler for keeping sudden changes in centripetal acceleration to an absolute minimum, i.e., his math is the reason the car doesn’t flip over just as we exit the highway even at the highway speed limit. Next time when you exit a well-built highway, then notice how gradually you turn the steering wheel.
This type of curve is called a transition curve and is used in the real word.
( Side note: straight lines in Euclidian space are curves with an infinite radius!) Euler Spiral by AdiJapan, CC BY-SA 3.0 The end result is a curve that transitions as smoothly as possible from a straight line to a curve. I’ve always been fascinated by the The Euler (or Cornu) Spiral, which has a curvature that increases linearly with the curve length, i.e., as we walk along the line from (0, 0) the radius decreases linearly with how far we walk (since the curvature is the reciprocal of the radius). Since a gradient is a transition of color, I got inspired by how we approach transitions elsewhere. More accurately, I quickly eyeballed some prettier-looking gradients as one-offs and then started tinkering when I got home. I started looking into creating consistently more visually appealing gradients. I got frustrated with plain linear gradients because they looked like Il cattivo above. Lately, I’ve been fiddling with gradients at work. The Frustrating Sharp Edges of background: linear-gradient() In this article, we’ll focus on how we can turn Il brutto into Il buono. Il brutto (the ugly): Standard linear gradients with sharp edges.Il cattivo (the bad): No text protection (bad accessibility).Il buono (the good): Smooth gradients in CSS that blends into their context.Here’s an example that shows how harsh a standard linear-gradient() can be compared to how smooth we can make it by easing it: Screencap from “The Good, the Bad and the Ugly” with gradients overlaid. Well, non-linear in the easing sense, anyway! As we’ll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Linear gradients are easy to create in CSS and are extremely useful.
0 kommentar(er)
