Video: WelcomeDiscover CSS gradients, and add depth and texture to your web designs while reducing load times.
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.
- 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
Hi there! My name is Justin Seeley. I'd like to welcome you to this course on CSS gradients. I'm pretty excited about this course, because it gives me a chance to show you an aspect of CSS that's often glossed over, but never really explored in depth. Gradients are a great way to add depth and texture to your web designs, and by using CSS to create them, we also cut down on the load time of our pages, which makes for a better viewing experience for our end-user. This course will start off with the basics of gradients, like browser specific syntax and creating simple linear and radial gradients as well. Once we get the basics nailed down, we're going to dive into a couple of mini projects, where you'll learn how to create an interesting gradient background for your site and also simulate metallic textures using nothing but CSS.
We'll wrap up the course by exploring things like creating diagonal gradients, adding gradients to text, and I'll even show you how you can use gradients to create some awesome repeatable patterns that can be used for backgrounds or buttons. I am excited to share all of this with you, so if you're ready, let's begin our look at CSS gradients.
There are currently no FAQs about CSS: Gradients.