Recreating Stripe's Text Effect
Offered By: Kevin Powell via YouTube
Course Description
Overview
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.
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
Related Courses
Intro to HTML and CSSUdacity Responsive Web Design Fundamentals
Google via Udacity HTML5 and CSS Fundamentals
World Wide Web Consortium (W3C) via edX CSS Basics
Microsoft via edX Advanced CSS Concepts
Microsoft via edX