Gradients

With CSS gradients, we can add depth to our designs by creating smooth and 0:00 gradual transitions between two or more colors. 0:04 A gradient is not exactly a real CSS color. 0:07 It's actually an image with absolute dimensions and no fixed size. 0:11 The actual size of a gradient by default matches the size of 0:15 the element it's applied to. 0:18 And they are commonly used for website backgrounds, header backgrounds or 0:20 in certain UI elements. 0:24 So, in our project, we're going to create a gradient in our 0:26 main header that overlays the background image. 0:29 It'll add a nice touch once we're done. 0:32 But first, let's go over how gradients work. 0:34 So, we'll go back to our style.css file. 0:38 And under Main Styles, right here in the main-header rule, 0:40 we're gonna define the background-image property at the bottom. 0:44 [BLANK_AUDIO] 0:49 Now, this will temporarily override the current background image 0:52 we're displaying in our main header, but that's okay for now. 0:55 So now, we're gonna define a linear gradient background by 0:58 typing linear-gradient followed by a set of parentheses. 1:04 Now, in between the parentheses is where we'll need to define the colors of 1:10 the gradient. 1:13 The colors can be any of the keyword values, it can also be a hex value or 1:15 an RGBA color value. 1:18 So first, let's define that orange hex value shade by typing #FFA949. 1:20 Then we're gonna follow this with a comma and we're gonna define our second value. 1:29 Let's make it the color keyword, firebrick. 1:33 And notice that when we hover over the gradient value in Workspaces, 1:36 the color preview shows the gradient. 1:40 I think that's pretty cool. 1:42 So, when we save our style sheet and refresh the page, this creates a smooth 1:43 fade from the orange color to firebrick red, from top to bottom. 1:49 Now, once we have our gradient colors defined, 1:55 we're also able to control the angle and position of our gradients. 1:58 So, by default, the gradient direction goes from top to bottom, so 2:02 as we can see here in our header, the orange in shade begins at the top and 2:07 it fades into the red color ending at the bottom. 2:11 Now, if we wanna reverse the gradient order so 2:15 that the firebrick red color starts from the top, 2:17 well, we can either reverse the colors in between the parentheses or 2:21 we can add the direction value to top before the color values. 2:26 So, right before the first color value, let's type to top and a comma. 2:31 So when we save our style sheet and refresh the page, as you can see, 2:38 that reverses the color order of our linear gradient. 2:43 And if we wanna change the direction to go, say, from right to left, well, 2:47 we can go back and change the direction value to say to left. 2:51 So now, when we take a look at it again, we can see how 2:58 our gradient starts on the right and ends on the left side of our header. 3:01 And if we want more control over the gradient direction, 3:07 we can also define angle values using degree units. 3:10 Now, the angle parameters rotate clockwise, so if we type the angle value 3:13 0deg for zero degrees, when we save our style sheet and refresh the page, 3:22 notice how this creates a gradient starting from the bottom to the top. 3:28 It's the same as the to top value we used earlier. 3:33 So, as the angle direction increases, 3:37 it then continues rotating clockwise unless we define a negative value. 3:39 So, for instance, if we change the angle value from zero degrees to 45 degrees, 3:43 when we refresh the browser, notice how the gradient moves 45 degrees clockwise. 3:51 So now it starts at the bottom left corner and ends at the top right corner. 3:56 And if we go back and change the degree value to 90 degrees, 4:02 when we save our style sheet and take a look at it once again, 4:09 this creates a gradient that starts on the left and ends on the right, and so forth. 4:12 So, the second type of gradient we can create is a radial gradient. 4:18 Radial gradients are like linear gradients that start from a center point and 4:22 smoothly spread outward in a circular or 4:27 elliptical shape based on the parameters we set. 4:30 And like linear gradients, we can create a basic radial gradient with two or 4:33 more color values, and the syntax is also very similar to linear gradients. 4:38 So, if we go back to our gradient declaration and 4:42 we change our gradient from linear to radial, and 4:46 let's remove the decree value and just keep the two color values, 4:50 when we save our style sheet and refresh the browser, 4:56 we get a rice radial-shaped gradient that's centered in our header. 5:00 It fills it entirely to each of the corners. 5:06 So, by default, the radial gradient shape is in the shape of an ellipse, but 5:10 we can change that. 5:15 So, to give the gradient a more circular shape, 5:16 we'll need to add the circle keyword before the list of colors. 5:19 So right before the first color value, 5:24 I'm going to type the keyword circle followed by a comma. 5:26 So now when we save our style sheet and take a look at our header once again, 5:30 you can see how the gradient is a little more evenly spread out as a circle. 5:34 And we'd really be able to see a more defined circle or 5:38 shape if the header wasn't as tall. 5:40 So, for example, let's go back and change the main headers' height to 450. 5:42 So we'll save this and refresh, and now we're able to 5:49 see more circular gradient shape compared to the default elliptical shape. 5:52 I'll go ahead and remove the circle value so we can see the difference. 5:57 Finally, we're also able to change the radial gradient's 6:03 position using the at keyword. 6:06 So, let's go back and add the circle shape value. 6:10 Then right after that, we're going to write at top followed by a comma. 6:14 And notice how there's no comma between the circle value and the word top. 6:21 They should all be defined before the first comma. 6:26 So, before we take a look at what this looks like, 6:30 let's go back to the height declaration and change the value back to 850 pixels so 6:32 we can get that fuller header height we want. 6:37 So, let's save our style sheet, and when we refresh the page, notice how the at 6:39 top position value positions the gradient in the top center area of our header. 6:45 Now, if we only use one position value, 6:51 the second value will default to center, but we can still use two position values. 6:54 For example, let's make the position at top right. 6:59 And when we save and take a look at it again, we can see how this positions 7:04 the origin of the radial gradient at the top right corner of our main header. 7:08 So up next, we're gonna learn how to add color stops to our gradients. 7:14 Then we'll finish up by adding a nice transparent gradient over the main 7:17 header background image. 7:21