Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,210 --> 00:00:07,080
So in this lecture, we're going to learn how we can actually create shadows using CSFs.
2
00:00:08,760 --> 00:00:15,900
And in order to demonstrate how shadows work in cases, what we're going to do is to add a shadow to
3
00:00:15,900 --> 00:00:17,310
each of these cards here.
4
00:00:18,160 --> 00:00:26,320
And remember that debt is one of the common uses of shadows, so to add a medium sized shadow to a product
5
00:00:26,320 --> 00:00:34,090
card like this one here right now, adding shadows in excess is actually quite simple.
6
00:00:34,570 --> 00:00:38,320
All we need to do is to use the box shadow property.
7
00:00:40,390 --> 00:00:47,800
So in order to add a shadow to a box, then remember how I said dead, we can also add shadows to text,
8
00:00:48,280 --> 00:00:50,400
but a bit more about that later.
9
00:00:50,920 --> 00:00:56,260
But anyway, the box shadow property actually requires multiple values.
10
00:00:56,260 --> 00:01:04,780
Here we can specify four or five values, and the first one is basically the horizontal offset of the
11
00:01:04,780 --> 00:01:05,200
shadow.
12
00:01:05,950 --> 00:01:11,920
So here in the first value, we can specify a length which will then be the horizontal offset between
13
00:01:11,920 --> 00:01:13,430
the box and the shadow.
14
00:01:14,080 --> 00:01:16,720
So let's just try 20 pixels here.
15
00:01:17,640 --> 00:01:24,900
Then the second value is the same, but for the vertical direction, so basically the offset of the
16
00:01:25,050 --> 00:01:27,750
shadow from the box in this direction here.
17
00:01:28,350 --> 00:01:30,150
So let's also use 20 pixels.
18
00:01:30,720 --> 00:01:33,740
And for now, I'm just putting any values here.
19
00:01:34,110 --> 00:01:40,650
And later I will then explain how we can create small and medium and large shadows by tweaking these
20
00:01:40,650 --> 00:01:41,190
values.
21
00:01:41,760 --> 00:01:42,330
All right.
22
00:01:43,020 --> 00:01:46,480
Next up, the third value is the blur of the shadow.
23
00:01:47,070 --> 00:01:50,910
So if we use a small value, it will be almost not blurred.
24
00:01:51,240 --> 00:01:56,100
And if we used a very large one, then, of course, the blur will be huge.
25
00:01:56,640 --> 00:02:02,040
So, again, I'm using 20 pixels here and we will then tweak these as we go.
26
00:02:02,980 --> 00:02:10,840
Then value number four is actually optional, but what it allows us to do is to basically scale the
27
00:02:10,840 --> 00:02:11,620
shadow up.
28
00:02:12,170 --> 00:02:15,670
So let's use, let's say, 10 here.
29
00:02:17,110 --> 00:02:22,660
All right, but remember that this one is optional, and if we don't specify it, it will simply be
30
00:02:22,660 --> 00:02:23,110
zero.
31
00:02:24,180 --> 00:02:31,590
Then the last one is the color of the shadow, and here let's just for now use black, which will look
32
00:02:31,590 --> 00:02:32,160
terrible.
33
00:02:32,730 --> 00:02:36,200
But this is just to fill it up with some values.
34
00:02:36,990 --> 00:02:44,450
So if we give it a safe, then, well, we get a huge black and terribly looking shadow.
35
00:02:45,300 --> 00:02:51,810
Now, actually, we want this shadow not to be just on this part, but on the entire card.
36
00:02:53,270 --> 00:02:58,550
So let's see if there is a class on that, and it is so the chair class.
37
00:03:00,580 --> 00:03:02,500
So here and.
38
00:03:04,270 --> 00:03:05,030
Yeah, it doesn't matter.
39
00:03:05,050 --> 00:03:10,090
I think all of them will have to take their class and what I'm also noticing here is that each of them
40
00:03:10,090 --> 00:03:16,030
is actually a figure element and to figure element, I think I hadn't described before.
41
00:03:16,390 --> 00:03:21,550
But basically it's a common element that we use for a product like this.
42
00:03:22,210 --> 00:03:28,990
But we could also have used the article HTML element, such as we used in decoding challenges of the
43
00:03:28,990 --> 00:03:29,870
previous section.
44
00:03:30,460 --> 00:03:31,110
Remember that?
45
00:03:31,660 --> 00:03:36,970
So there we had a shoe, which was also kind of an article like this one here.
46
00:03:37,270 --> 00:03:39,430
And so there we use the article element.
47
00:03:40,380 --> 00:03:47,790
So, again, we could have used that here as well, but figure is also kind of a standard for displaying
48
00:03:47,790 --> 00:03:49,830
any cards like these ones.
49
00:03:51,510 --> 00:03:53,670
But anyway, let's now go back.
50
00:03:55,220 --> 00:03:59,150
Select the chair classier and move or shadow their.
51
00:04:01,000 --> 00:04:08,350
Nice, or maybe not so nice, because we now need to fix that first problem, which is that the shadow
52
00:04:08,350 --> 00:04:11,740
is very dark, which makes it look very unnatural.
53
00:04:12,400 --> 00:04:18,850
Now, remember from way back how we learned that when we want to display a color with some opacity,
54
00:04:19,240 --> 00:04:22,630
we usually use the RBA notation for that.
55
00:04:23,050 --> 00:04:23,530
Right.
56
00:04:24,160 --> 00:04:29,950
So we can easily convert that by hovering over this color and then here in a color picker.
57
00:04:31,170 --> 00:04:33,360
We just need to keep clicking on this title.
58
00:04:36,080 --> 00:04:36,980
One more time.
59
00:04:38,270 --> 00:04:44,780
Yeah, so now we have RGV, and if we don't change this later, it will add a here and a fourth value,
60
00:04:44,990 --> 00:04:46,430
which is for the opacity.
61
00:04:48,460 --> 00:04:55,970
Now, usually for a shadow, we use a very low value, something like zero point one Max.
62
00:04:56,710 --> 00:04:59,690
So this is the shadow that you get in that situation.
63
00:05:00,370 --> 00:05:07,480
However, to demonstrate all the other values, let's put it back at a higher value so that we can actually
64
00:05:07,480 --> 00:05:10,770
see the shadow when we manipulate the rest of the values.
65
00:05:11,500 --> 00:05:17,650
So usually in user interface design, we want the light source to basically come from the top.
66
00:05:18,190 --> 00:05:22,690
So basically from here shining down on the element basically from here.
67
00:05:23,260 --> 00:05:29,050
So what that means is that the shadow cannot be like it is right now, because having a shadow that
68
00:05:29,050 --> 00:05:35,530
goes the same amount to the bottom and right kind of means that the light source is here shining in
69
00:05:35,530 --> 00:05:38,080
this direction where I'm moving the mouse.
70
00:05:38,650 --> 00:05:39,060
Right.
71
00:05:39,550 --> 00:05:41,400
So that's quite intuitive, I think.
72
00:05:42,070 --> 00:05:46,300
And so but if we want a light source to be here at the top.
73
00:05:46,750 --> 00:05:50,950
So in this direction, then we do not want any offset here to this side.
74
00:05:51,400 --> 00:05:56,550
And so usually we do set this value here to zero now.
75
00:05:56,560 --> 00:05:56,860
Right.
76
00:05:57,250 --> 00:06:00,760
And so I think that this looks a lot more natural right now.
77
00:06:01,940 --> 00:06:10,490
Then the other value actually looks OK, so the vertical offset, so for a medium sized shadow, that
78
00:06:10,490 --> 00:06:11,840
is a reasonable amount.
79
00:06:12,860 --> 00:06:19,310
Then this one here, remember, is the blur, and for example, that set it to something smaller just
80
00:06:19,310 --> 00:06:26,540
to see and at the extreme, if it was zero, then the shadow would be completely a box.
81
00:06:27,010 --> 00:06:28,010
So just like this.
82
00:06:28,860 --> 00:06:29,350
All right.
83
00:06:29,840 --> 00:06:31,550
However, you see that the box.
84
00:06:31,560 --> 00:06:35,060
So this shadow is bigger than the original box itself.
85
00:06:35,390 --> 00:06:42,680
And so the reason for that is this value number for which, remember, is the radius, which remember
86
00:06:42,680 --> 00:06:45,760
is basically a value to scale the box shadow up.
87
00:06:46,580 --> 00:06:51,920
So usually I actually leave this at zero and so then it will look like this.
88
00:06:52,700 --> 00:06:59,660
So right now the shadow is only here behind the box and then coming out a little bit here because of
89
00:06:59,660 --> 00:07:00,800
these 20 pixels.
90
00:07:01,610 --> 00:07:06,080
If we increase those, then this part here, of course, becomes bigger.
91
00:07:07,400 --> 00:07:14,270
Right, so I usually leave this here at zero, which is the same as leaving it out completely, but
92
00:07:14,270 --> 00:07:19,160
I will just leave it here so that, you know, for reference that there are five possible values.
93
00:07:20,950 --> 00:07:27,430
So, of course, this now doesn't look at all like a shadow, so let's add back some blur here.
94
00:07:28,100 --> 00:07:33,160
So a 10, for example, it would look like this, which still looks quite unnatural.
95
00:07:34,210 --> 00:07:44,080
And while this makes it a bit better, but still we can go bigger like 30 pixels and so well, in my
96
00:07:44,080 --> 00:07:46,070
opinion at least, that looks a lot better.
97
00:07:46,540 --> 00:07:51,340
We could go even bigger, but then the shadows would start to overlap each other here.
98
00:07:51,850 --> 00:07:53,850
And so let's not go there.
99
00:07:55,230 --> 00:08:03,660
OK, so if we now decrease this value here, it will start to look quite natural, which is always what
100
00:08:03,660 --> 00:08:07,740
we need to strive for when we design a shadow here in excess.
101
00:08:08,920 --> 00:08:09,460
OK.
102
00:08:10,490 --> 00:08:19,070
So this now looks like a nice and clean and especially natural looking shadow, and it does the job
103
00:08:19,070 --> 00:08:25,010
well of highlighting these cards here just a little bit, but without adding too much visual clutter
104
00:08:25,010 --> 00:08:26,000
to our picture.
105
00:08:26,570 --> 00:08:29,900
And I think we can actually go a little bit lower even.
106
00:08:30,980 --> 00:08:33,260
So what happens if we give it five percent?
107
00:08:34,280 --> 00:08:42,590
Then it becomes even subtler, but it is still enough that we basically get this border here, so without
108
00:08:42,590 --> 00:08:47,510
a shadow, this was simply all white, which we can see by doing this.
109
00:08:48,550 --> 00:08:54,850
Right, but as we start adding some more shadow, then, of course, that starts to create a separation
110
00:08:54,850 --> 00:08:57,430
between the element itself and the background.
111
00:08:58,410 --> 00:09:04,390
So, of course, that's zero point five and maybe that's a little bit too little.
112
00:09:04,740 --> 00:09:06,130
Let's put it at seven.
113
00:09:06,810 --> 00:09:09,440
So this is basically a seven percent capacity.
114
00:09:09,750 --> 00:09:13,500
And so this is a value that I like to use in these situations.
115
00:09:14,220 --> 00:09:15,930
And this looks quite nice.
116
00:09:16,410 --> 00:09:21,660
And hopefully with this, you learned how this box shadow property actually works.
117
00:09:23,110 --> 00:09:28,690
Now, this kind of property, which requires so many values, is actually a good candidate to look it
118
00:09:28,690 --> 00:09:30,760
up on the MDN documentation.
119
00:09:31,450 --> 00:09:39,010
So MDN Fox Shadow, if you're interested in learning more about this particular property, there's also
120
00:09:39,010 --> 00:09:44,860
a lot of examples, for example, for creating that kind of glow that I mentioned before.
121
00:09:45,730 --> 00:09:49,070
So of course the shadow doesn't have to be some kind of gray.
122
00:09:49,570 --> 00:09:56,170
So like a variation of black, but you can use a color to create this kind of glowing effect, their.
123
00:09:57,090 --> 00:10:01,500
And you can move the shadow around, of course, using even negative values here.
124
00:10:02,650 --> 00:10:10,240
And yeah, you can even actually add multiple shadows, as we have on this element by adding a comma
125
00:10:10,240 --> 00:10:10,480
here.
126
00:10:12,510 --> 00:10:18,840
Right, you can also read about all of them, but we're not going to do that, but this is exactly what
127
00:10:18,840 --> 00:10:20,340
the documentation is for.
128
00:10:21,060 --> 00:10:26,580
And now, just to finish, let me very quickly also show you how we can use shadows on text.
129
00:10:27,270 --> 00:10:29,880
So I will just copy this because it's very similar.
130
00:10:31,130 --> 00:10:33,680
And let's just do it here on our one element.
131
00:10:38,610 --> 00:10:43,780
So instead of being called box shadow, it's called text shadow.
132
00:10:44,370 --> 00:10:48,420
And this one doesn't have this fourth value of this, Brett.
133
00:10:49,440 --> 00:10:53,580
So it's just like this, let's get some more here.
134
00:10:54,600 --> 00:11:01,290
Just to see the effect and there we go now, this is a lot of blur, that's why we cannot really see
135
00:11:01,290 --> 00:11:01,530
it.
136
00:11:02,620 --> 00:11:07,660
So here, the valleys need to be a lot smaller and now you can see it, right?
137
00:11:10,360 --> 00:11:12,930
So something like this might be possible.
138
00:11:15,820 --> 00:11:21,250
And so in this situation, of course, this doesn't look really good, but actually tax shadow is quite
139
00:11:21,250 --> 00:11:25,470
useful for situations where you have text on top of an image.
140
00:11:26,200 --> 00:11:31,780
So that's something I didn't discuss when we talked about image, but that would be yet another technique
141
00:11:31,780 --> 00:11:33,940
of handling text on top of images.
142
00:11:35,240 --> 00:11:43,340
All right, but let's turn it off, because that looks kind of crazy, and so, yeah, that's it for
143
00:11:43,340 --> 00:11:51,410
working with Shadows and hope that made sense and that it was fun to keep adding some real world effects
144
00:11:51,590 --> 00:11:55,020
that you see on other pages that you visit every single day.
145
00:11:55,790 --> 00:12:01,370
And next up, we're going to talk about border radios, which is yet another one of those, a little
146
00:12:01,370 --> 00:12:06,020
bit more modern as properties that we use in the real world all the time.
14232
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.