Learn how to recreate Stripe's impressive text effect in this 27-minute tutorial. Explore the background gradient animation, positioning techniques, and step-by-step implementation of the effect. Discover how to improve readability using custom properties and gain insights into Stripe's approach. Follow along as the instructor demonstrates various attempts, from simple solutions to more advanced techniques, to achieve the desired result. Perfect for web developers looking to enhance their CSS skills and create eye-catching text effects.
Overview
Syllabus
- Introduction
- Getting started
- The background gradient animation
- Fast motion starts
- Fast motion ends
- Fast motion starts
- Flashing starts
- Flashing ends
- Fast motion ends
- Positioning the background
- Trying a simple solution
- Seeing how Stripe did it
- Setting up the effect - first attempt
- Setting up the next - getting it right
- Improving readability with a custom property
- Do you like this style of video?
Taught by
Kevin Powell
