1h 13m – Beginner
Join Justin Seeley as he introduces gradients, a somewhat hidden strength of CSS that allows you to add depth and texture to your web designs while reducing load times—creating a better viewing experience for your visitors versus static images. Discover how to create simple linear and radial gradients; apply them to backgrounds, buttons, and text; and write browser-specific syntax to ensure your designs look the same across multiple platforms. The course also shows how to create metallic textures, diagonal gradients, and repeatable patterns. Along the way, Justin demonstrates real-world uses for gradients and techniques to extend them beyond the basics.
Topics include:
Exploring browser compatibility
Creating horizontal and vertical gradients
Adding extra color stops
Exploring radial gradient syntax
Using transparency
Creating fallbacks
Generating gradients via the web
Introduction – 1m 52s
Welcome – 1m 0s
Using the Exercise Files – 52s
1. Getting Started – 7m 41s
Examples of gradients in design – 4m 34s
Exploring browser compatibility – 3m 7s
2. Creating Linear Gradients – 13m 22s
Exploring the linear syntax – 2m 28s
Creating a horizontal gradient – 2m 46s
Creating a vertical gradient – 1m 43s
Adding extra color stop values – 2m 39s
Getting creative with gradient stops – 3m 46s
3. Creating Radial Gradients – 13m 22s
Exploring the radial syntax – 3m 4s
Creating a basic radial gradient – 2m 5s
Adding extra color stop values – 2m 35s
Creating complex radial patterns – 5m 38s
4. Quick Projects – 12m 24s
Creating a gradient background – 3m 53s
Simulating metallic textures – 8m 31s
5. Beyond the Basics – 21m 38s
Mixing gradients with transparency – 4m 0s
Creating diagonal gradients – 1m 56s
Applying gradients to text – 1m 41s
Using gradients to create patterns – 4m 27s
Creating fallbacks – 4m 6s
Generating gradients via the web – 5m 28s
Conclusion – 3m 17s
Taking the next step – 2m 56s
Goodbye – 21s