3 Things I Learned About CSS by Recreating Stripe's Pricing Page
SVG offers advantages for animation and design to web developers beyond performance
Most developers know SVG images are incredibly memory efficient and as a result offer dramatic speed improvements for the loading time of your website.
One thing new developers may not know however is that SVG images can easily be styled and animated in ways most other image formats can not.
SVG images can be filled with colors, given gradient effects, and even styled with embedded design patterns using thed CSS background clip property.
You can also animate SVG images by morphing SVG image paths on hover state.
It's easier to use absolute and relative positioning to create background layouts than by adjusting z-index values
Stripe's pricing page, like many webpages, uses background layouts to add visual flair without distracting users from important customer messaging.
Background elements can be easy to create when they're composed of simple background color transitions, full-page cover images, and hero patterns, but when the background is itself composed of grid elements developers need a slightly more detailed understanding of how to use and implement absolute and relative positioning.
<!-- background color grid -->
<div class="relative min-h-screen">
<div class="absolute inset-0 transform -skew-y-12 origin-top-left">
<div class="bg-green-100 grid grid-cols-10 grid-rows-6 min-h-screen bg-gradient-to-r from-green-400 to-green-200 transform">
<div class="bg-green-200 opacity-50 row-start-3 col-span-2"></div>
<div class="bg-green-100 opacity-50 row-start-5 col-start-9 col-span-2"></div>
</div>
</div>
Deeper appreciation for purposeful simplicity in design and engineering
While researching Stripe's design and engineering, I came across some great content on their blog.
Connect: behind the front-end experience offered many insights.
Some of my key takeaways:
Stripe's team uses CSS instead of image files to display how Stripe's platform looks on multiple devices because it reduces website file sizes and increases website loading performance beyond even what efficient image file formats like SVG offer.
"We can add hardware-acceleration, animate any part, make it responsive without losing image quality, and precisely position DOM elements (e.g. other images) within the laptop’s display. This flexibility doesn’t mean giving up on clean code—the markup stays clear, concise and descriptive"
<div class="laptop">
<span class="shadow"></span>
<span class="lid"></span>
<span class="camera"></span>
<span class="screen"></span>
<span class="chassis">
<span class="keyboard"></span>
<span class="trackpad"></span>
</span>
</div>
Descriptions of tradeoffs between different types of web animation:
"CSS transitions. This is the fastest, easiest, and most efficient way to animate. For simple things like hover effects, this is the way to go."
"Web Animations API...This should be your default choice for any animation where you need interactivity, random effects, chainable sequences, and anything richer than a purely declarative animation."
Other Stripe articles I enjoyed reading:
"The most straightforward way to animate individual dots is to generate them in a three-dimensional space. To do this, we reused the code from our SVG to generate rows of dots as geometry in Three.js. Each row includes a different number of dots, from zero at the poles to five hundred at the equator. We used a sine function to choose the number of dots for each row, plotted each dot, and applied the lookAt method to rotate each dot to face the center of the sphere. However, the number of dots jumped inconsistently along a few latitudes, creating harsh lines and an unnatural effect in the longitudinal columns."
"we turned off the antialias parameter of the WebGL renderer. This one change not only fixed the issue on high-res monitors, but also improved performance of the animation and smoothness of scrolling on all devices, even those already running at 60fps. One might assume that removing antialiasing would make everything look pixelated. Since it only applies to the edges of the geometry, our image textures were still smooth and gradients and lighting were unaffected."
"the way HSL calculates lightness is flawed. What most color spaces don’t take into account is that different hues are inherently perceived as different levels of lightness by the human eye—at the same level of mathematical lightness, yellow appears lighter than blue."
"When we take a sample of colors with the same lightness and saturation in a perceptually uniform color space, we can observe a significant difference. These colors appear to blend together, and each color appears to be just as light and as saturated as the rest."
"It’s easy for familiarity with code to become a barrier between different groups within a technology company: lots of companies have an upper tier of code-wrangling wizards that are supported by the rest of the company, sometimes known as the non-engineers. From the beginning, we’ve tried hard to avoid this at Stripe. In seating, we mix engineering teams with non-engineering teams. When we hire, we seek out engineers who are excited about problems beyond code itself."
Check out the project:
My redesign of Stripe's pricing page