1 00:00:00,000 --> 00:00:04,852 [MUSIC] 2 00:00:04,852 --> 00:00:09,792 We've reached the final stage of Enhancing Design with CSS. 3 00:00:09,792 --> 00:00:15,479 And our Lake Tahoe website looks pretty appealing, at least on mobile screens. 4 00:00:15,479 --> 00:00:19,852 For the remaining stage, our focus will be attention to detail. 5 00:00:19,852 --> 00:00:25,580 Since small details are what separate a good online experience from a great one. 6 00:00:26,660 --> 00:00:30,641 Let's start by making our buttons stand out a bit more, and 7 00:00:30,641 --> 00:00:32,400 invite a few more clicks. 8 00:00:32,400 --> 00:00:35,954 We'll do so by applying CSS gradients, 9 00:00:35,954 --> 00:00:41,505 a feature I hinted at in the last stage, but didn't dive into. 10 00:00:41,505 --> 00:00:48,077 With CSS gradients, we can add depth to our designs by creating smooth and 11 00:00:48,077 --> 00:00:52,535 gradual transitions between two or more colors. 12 00:00:52,535 --> 00:00:57,045 A gradient is not exactly a real CSS color. 13 00:00:57,045 --> 00:01:03,201 It's actually an image, except instead of loading an image file from a web server. 14 00:01:03,201 --> 00:01:09,907 The browser uses color to create a gradient image to fill an HTML element. 15 00:01:09,907 --> 00:01:16,245 This is why CSS gradients are created using the background-image property. 16 00:01:16,245 --> 00:01:22,436 The size of a gradient by default matches the size of the element it's applied to. 17 00:01:22,436 --> 00:01:25,287 So, if we apply a vertical gradient, 18 00:01:25,287 --> 00:01:29,932 transitioning from green to yellow, to our website header. 19 00:01:29,932 --> 00:01:36,063 The height of our gradient will by default match the height of our header element. 20 00:01:36,063 --> 00:01:41,063 The most common gradients in CSS are linear gradients in which 21 00:01:41,063 --> 00:01:45,598 colors flow in a straight line, in a single direction. 22 00:01:45,598 --> 00:01:50,683 And radial gradients, in which the gradient starts at a single point. 23 00:01:50,683 --> 00:01:55,050 And emanates outward in a circular or elliptical shape. 24 00:01:56,870 --> 00:02:01,761 The most prominent links on our Lake Tahoe website have the 'callout' class 25 00:02:01,761 --> 00:02:02,974 applied to them. 26 00:02:02,974 --> 00:02:07,341 These buttons currently use a simple orange background color. 27 00:02:07,341 --> 00:02:11,297 But let's see if we can change that to a gradient. 28 00:02:11,297 --> 00:02:16,286 We'll start with a simple radial gradient that transitions 29 00:02:16,286 --> 00:02:20,016 from that same orange to a papayawhip color. 30 00:02:35,223 --> 00:02:39,732 The gradient starts in the center using our darker orange color. 31 00:02:39,732 --> 00:02:44,558 And transitions gradually to the papayawhip color by the time it reaches 32 00:02:44,558 --> 00:02:46,623 the edges of our button shape. 33 00:02:46,623 --> 00:02:51,335 If we try making our buttons taller by increasing the amount of padding. 34 00:02:55,095 --> 00:02:59,893 The gradient adjusts automatically to fill the new shape of the button. 35 00:02:59,893 --> 00:03:06,999 These buttons are probably too tall now, so I'll undo that before moving on. 36 00:03:06,999 --> 00:03:11,481 By default the radial gradient is in the shape of an ellipse, but 37 00:03:11,481 --> 00:03:16,882 we can add a keyword called circle to give the gradient a more circular shape. 38 00:03:25,089 --> 00:03:29,872 Radial gradients don't have to start at the default center. 39 00:03:29,872 --> 00:03:34,972 We can use the 'at' keyword to start the gradient from the top right corner for 40 00:03:34,972 --> 00:03:35,720 example. 41 00:03:45,165 --> 00:03:47,283 How about a linear gradient? 42 00:03:47,283 --> 00:03:51,482 Let's try changing the value of our background-image property to 43 00:03:51,482 --> 00:03:52,864 linear-gradient. 44 00:03:56,942 --> 00:04:01,183 We'll delete the keywords here, since circle doesn't make much sense for 45 00:04:01,183 --> 00:04:02,316 a linear gradient. 46 00:04:08,055 --> 00:04:12,759 By default, the linear gradient matches the height of our button and 47 00:04:12,759 --> 00:04:16,744 transitions in a straight line from the top to the bottom. 48 00:04:16,744 --> 00:04:20,335 To change the direction of the gradient's transition. 49 00:04:20,335 --> 00:04:24,031 We can apply keywords such as to top which will make 50 00:04:24,031 --> 00:04:27,379 the gradient transition from bottom to top. 51 00:04:36,270 --> 00:04:39,074 Or if you prefer a horizontal gradient, 52 00:04:39,074 --> 00:04:43,454 to right will make the gradient transition from left to right. 53 00:04:50,693 --> 00:04:54,237 For more control of the gradient direction, 54 00:04:54,237 --> 00:04:57,973 we can define angle values using degree units. 55 00:04:57,973 --> 00:05:03,208 The angle parameters rotate clockwise, so the value 0deg, 56 00:05:03,208 --> 00:05:07,613 creates a gradient starting from the bottom to the top. 57 00:05:07,613 --> 00:05:10,588 It's the same as using the to top value. 58 00:05:16,071 --> 00:05:20,418 Watch that you don't type a space between the number and the measurement. 59 00:05:23,810 --> 00:05:27,856 The angle directions then continue rotating clockwise, 60 00:05:27,856 --> 00:05:30,753 unless we define a negative angle value. 61 00:05:30,753 --> 00:05:34,920 So, 30deg would start closer to the bottom left corner and 62 00:05:34,920 --> 00:05:36,973 transition to the upper right. 63 00:05:40,042 --> 00:05:45,442 -30deg on the other hand, would start closer 64 00:05:45,442 --> 00:05:51,325 to the bottom right corner and transition to the top left. 65 00:05:55,695 --> 00:06:00,464 So, those are the basics of working with CSS gradients except that 66 00:06:00,464 --> 00:06:04,312 we've only transitioned between two solid colors. 67 00:06:04,312 --> 00:06:07,352 What if you wanted to involve a third color? 68 00:06:07,352 --> 00:06:12,184 Or add a degree of transparency to our gradient colors? 69 00:06:12,184 --> 00:06:16,880 We'll learn these advanced CSS gradient techniques in our next video.