YoVDO

Recreating Stripe's Text Effect

Offered By: Kevin Powell via YouTube

Tags

HTML & CSS Courses Computer Science Courses Web Design Courses Text Animation Courses

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 CSS
Udacity
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