Gradients: Color Stops3:49 with Guil Hernandez
We're able to add color stops to control the progression of colors in a linear and radial gradient. Color stops are stopping points in a gradient that show a specific color at the exact location we set.
With linear and radial gradients, we're able to add what are called color stops to 0:00 control the progression of colors in a gradient. 0:04 Color stops are stopping points in a gradient that show 0:07 a specific color at the exact location we set it to be. 0:10 So, they let us create more complex gradient effects. 0:14 So each color stop should have one or 0:18 two values, a color value and an optional position value. 0:20 So at the very least, we can simply define a list of colors as color stops, 0:25 like we've done all along in our linear and radial gradients. 0:30 Now currently, the radial gradient in our main header has two color stops. 0:34 The orange color stop and the firebrick color stop. 0:40 So, let's go ahead and add a third color stop with the color value dodgerblue. 0:45 So let's save our style sheet and go back to the browser. 0:53 And when we refresh the browser, notice how the area between each of 0:57 the three color stops is filled with a continuous color transition from one 1:01 color to the other, in the order we listed. 1:06 But we're also able to control to position of any of these color stops. 1:09 So, by default, since we haven't defined any color stop position values just yet, 1:13 we're telling the browser that the orange color stop needs to 1:18 begin at the zero position. 1:22 Then display a continuous color transition down to the firebrick color stop, 1:24 which begins halfway at the 50% position. 1:31 Then continue that smooth color transition down to the dodgerblue color stop, 1:34 which ends the gradient at the 100% position. 1:40 So this is exactly the same as defining our 1:45 first orange color stop position value as 0%. 1:48 Then our second firebrick position value as 50%. 1:52 And the third dodgerblue stop as 100%. 1:59 So, as we can see, at each color stop position 2:02 declared the respective color value's hue is 100% of its color. 2:07 The browser then evenly distributes and fades the other values. 2:13 So now if you go back and change any of these color stop position values, 2:18 the gradient adjusts according to those values. 2:22 So, for example, let's change the second firebrick color stop position to 20%. 2:25 So, now when we save our style sheet and refresh the browser, we can see that 2:32 pure firebrick red color at 20% in the gradient instead of at 50%. 2:37 Then it's evenly distributed and faded into the dodgerbblue color stop. 2:42 And if we go back and change the color stop position value to something else, 2:48 let's say from 20% to 60%. 2:53 When we refresh the browser, notice how that pure firebrick red 2:57 hue now starts at the 60% position in the gradient line. 3:02 And we can even go beyond the 100% value to get wider color transitions. 3:07 So for example, let's to change the third color stop to 120%. 3:12 So now when we save our style sheet and refresh the browser, 3:16 we can see that the color transition from red to dodgerblue is now much wider. 3:21 So now we're only seeing the top part of the color transition to dodgerblue. 3:27 Color stops work the same way in linear gradients, so 3:33 be sure to also experiment with them in linear gradients. 3:36 Now, the best way to create nice gradient effects is by experimenting with 3:39 color stops, color values, and 3:43 the position and angle perimeters until you get that desired effect. 3:45
You need to sign up for Treehouse in order to download course files.Sign up