Getting creative with gradient stops


show more Getting creative with gradient stops provides you with in-depth training on Web. Taught by Justin Seeley as part of the CSS: Gradients show less
please wait ...

Getting creative with gradient stops

All right, so now that we understand how to add more than one gradient stop to our gradients that we create via CSS, it's time to get a little bit more creative with those gradient stops, and start positioning them in different ways. So I have open here a document that has just a big box with a gradient going across it, and it goes red, yellow to red, and it just does that in an even fashion all the way across. So there is an equal amount of red, equal amount of yellow, and another equal amount of red on the right-hand side. So in this gradient, what I want to do is I want to play around with the positioning of this yellow gradient.

And I'm going to do that by telling it where to start in relationship to the overall width of this box. So what I want to do now is go back over into my code, and in order to tell a gradient that it needs to start or stop in a certain location, you have to go to that particular element that you want to control and then give it either a perce...

Getting creative with gradient stops
Video duration: 3m 46s 1h 13m Beginner

Viewers:

Getting creative with gradient stops provides you with in-depth training on Web. Taught by Justin Seeley as part of the CSS: Gradients

Subject:
Web
Software:
CSS
Author:
please wait ...