1
00:00:00,313 --> 00:00:05,410
With linear and radial gradients
we're able to add what are called

2
00:00:05,410 --> 00:00:10,611
the color stops to control
the progression of colors in a gradient.

3
00:00:10,611 --> 00:00:15,094
Color stops are stopping
points in a gradient that show

4
00:00:15,094 --> 00:00:19,196
a specific color at the exact
location we define.

5
00:00:19,196 --> 00:00:24,209
So, they let us create more
complex gradient effects.

6
00:00:24,209 --> 00:00:29,228
Currently, the linear gradient in our
.callout class has two color stops.

7
00:00:29,228 --> 00:00:35,543
The orange color stop at the beginning,
and the papayawhip color stop at the end.

8
00:00:35,543 --> 00:00:40,963
To add a third color stop, we can start
by simply adding another color name or

9
00:00:40,963 --> 00:00:43,431
hex value to our gradient colors.

10
00:00:43,431 --> 00:00:48,854
For example, what if we wanted our
orange hex value to transition

11
00:00:48,854 --> 00:00:53,497
to firebrick red before
transitioning to papayawhip.

12
00:00:55,948 --> 00:01:01,505
We haven't specified any color
stop position values just yet.

13
00:01:01,505 --> 00:01:05,642
So, the browser places
the firebrick color exactly

14
00:01:05,642 --> 00:01:09,506
halfway between the orange and
the papayawhip.

15
00:01:09,506 --> 00:01:15,135
CSS gives us the ability to control
exactly where our color stops land.

16
00:01:15,135 --> 00:01:19,014
We just need to type percentage
values after each color stop.

17
00:01:26,350 --> 00:01:32,169
So far what we typed matches the default,
but let's try some different numbers.

18
00:01:32,169 --> 00:01:36,569
If we change the number
next to firebrick to 25%.

19
00:01:36,569 --> 00:01:42,377
We'll see pure firebrick red 25%
of the way through the gradient.

20
00:01:42,377 --> 00:01:46,561
Then the colors will
transition from firebrick to

21
00:01:46,561 --> 00:01:49,259
papayawhip the rest of the way.

22
00:01:49,259 --> 00:01:56,621
There's no rule stating that our gradient
needs to start at 0% or finish at 100%.

23
00:01:56,621 --> 00:02:01,785
If we change the papayawhip
color stop to 60%.

24
00:02:01,785 --> 00:02:05,238
Now the gradient
transitions to papayawhip,

25
00:02:05,238 --> 00:02:07,989
60% of the way through the shape.

26
00:02:07,989 --> 00:02:12,778
And remains papayawhip
colored the rest of the way.

27
00:02:12,778 --> 00:02:19,084
And our color stops to work no matter
what direction the gradient is rotated.

28
00:02:19,084 --> 00:02:23,833
If we delete the degree value,
for example.

29
00:02:23,833 --> 00:02:28,881
The gradient returns to its
top to bottom direction but

30
00:02:28,881 --> 00:02:33,061
the color stops function
the same as before.

31
00:02:33,061 --> 00:02:38,005
We can create a dramatic glass like
effect by positioning one color

32
00:02:38,005 --> 00:02:40,573
stop immediately after another.

33
00:02:40,573 --> 00:02:44,520
I'm going to replace my gradient
values with four colors.

34
00:02:58,929 --> 00:03:04,682
Notice that I've included color
stops at both 50 and 51%.

35
00:03:04,682 --> 00:03:09,276
The colors transition
gently from 0% to 50%.

36
00:03:09,276 --> 00:03:14,099
Then jump immediately to
a different color at 51% before

37
00:03:14,099 --> 00:03:18,349
starting another gradual
transition to 100%.

38
00:03:23,392 --> 00:03:28,263
We can add even more shine to this
gradient by comma separating two or

39
00:03:28,263 --> 00:03:29,549
more gradients.

40
00:03:44,590 --> 00:03:50,780
The gradient listed first will by default
cover the original gradient listed second.

41
00:03:50,780 --> 00:03:54,350
So, for
now I'm only seeing my new gradient.

42
00:03:54,350 --> 00:04:00,529
However, what happens if we use RGBA
values rather than color names?

43
00:04:00,529 --> 00:04:03,466
Our gradient will include transparency

44
00:04:23,519 --> 00:04:29,224
And now we see a subtle lighting effect
caused by combining two gradients.

45
00:04:29,224 --> 00:04:33,849
One that uses transparency
layered over one that

46
00:04:33,849 --> 00:04:38,826
doesn't plus our box shadow
from an earlier video.

47
00:04:38,826 --> 00:04:40,731
Fun stuff, right.

48
00:04:40,731 --> 00:04:46,452
That last gradient declaration
probably looked a little complicated.

49
00:04:46,452 --> 00:04:51,200
But it's worth a reminder that
the most critical part of gradients

50
00:04:51,200 --> 00:04:55,545
isn't memorizing hex values or
all the parts of the syntax.

51
00:04:55,545 --> 00:05:00,624
To succeed in working with CSS gradients,
it's enough to understand

52
00:05:00,624 --> 00:05:04,939
which values control gradient
direction and color stops.

53
00:05:04,939 --> 00:05:11,188
And to apply your knowledge of CSS
colors from earlier courses and videos.

54
00:05:11,188 --> 00:05:16,137
And of course,
keep on referring to documentation

55
00:05:16,137 --> 00:05:19,827
from sources like MDN and CSS Tricks.

56
00:05:19,827 --> 00:05:25,357
In our last video, we'll improve
the spacing of our Lake Tahoe page for

57
00:05:25,357 --> 00:05:30,057
better legibility, and
add CSS media queries to make it look

58
00:05:30,057 --> 00:05:34,410
just as effective on a large
screen as it does on mobile.