1
00:00:02,120 --> 00:00:06,400
Before we finish the styling of this page here,

2
00:00:06,400 --> 00:00:09,440
and before we also come closer to finishing this module,

3
00:00:09,440 --> 00:00:12,600
there is one last property I would like to show you,

4
00:00:12,600 --> 00:00:14,178
which is helpful to make your pages

5
00:00:14,178 --> 00:00:17,017
look a lot more beautiful.

6
00:00:17,017 --> 00:00:20,670
It's the box shadow property.

7
00:00:20,670 --> 00:00:24,342
The box shadow simply adds a shadow around

8
00:00:24,342 --> 00:00:28,060
an element's frame, around its borders so to say.

9
00:00:28,060 --> 00:00:30,620
Well, and if you look at our list items here,

10
00:00:30,620 --> 00:00:34,090
some additional shadow here to make these look a bit better.

11
00:00:34,090 --> 00:00:35,603
It's definitely helpful.

12
00:00:36,700 --> 00:00:38,540
Before we applied the box shadow property,

13
00:00:38,540 --> 00:00:41,189
though in our code, let's first get started here

14
00:00:41,189 --> 00:00:44,179
with our list items here, and let's apply this property

15
00:00:44,179 --> 00:00:46,500
directly here in the dev tools.

16
00:00:46,500 --> 00:00:49,840
So you simply click into the area for the CSS rules

17
00:00:49,840 --> 00:00:52,160
of the list item.

18
00:00:52,160 --> 00:00:55,943
And now you add the box shadow property, this one.

19
00:00:57,100 --> 00:01:00,140
And we can define the values for this

20
00:01:00,140 --> 00:01:02,830
box shadow property in many different ways.

21
00:01:02,830 --> 00:01:05,050
I will show you a very common one here,

22
00:01:05,050 --> 00:01:09,160
which consists of four separate values which we define.

23
00:01:09,160 --> 00:01:12,589
The first value here is the so-called offset

24
00:01:12,589 --> 00:01:15,270
along the X axis.

25
00:01:15,270 --> 00:01:19,420
This means we will move the shadow from being directly

26
00:01:19,420 --> 00:01:23,920
behind our element to the right a bit, so to say.

27
00:01:23,920 --> 00:01:27,283
So we could use five pixels here, for example.

28
00:01:28,220 --> 00:01:29,660
Like this.

29
00:01:29,660 --> 00:01:32,770
Then the second value we define, following the offset

30
00:01:32,770 --> 00:01:37,040
along the X axis, is the offset along the Y axis.

31
00:01:37,040 --> 00:01:38,928
So we push the shadow down a bit,

32
00:01:38,928 --> 00:01:41,220
according to our definition here,

33
00:01:41,220 --> 00:01:43,460
which could again be five pixels.

34
00:01:43,460 --> 00:01:46,140
You can now see the shadow immediately on the website

35
00:01:46,140 --> 00:01:48,163
here for our list items.

36
00:01:49,100 --> 00:01:51,527
Now we have a third option which defines

37
00:01:51,527 --> 00:01:55,110
the so-called blur radius because at the moment you see

38
00:01:55,110 --> 00:01:58,140
it's a very strict ending of that box shadow.

39
00:01:58,140 --> 00:02:01,330
And with the radius, we can make this a bit softer.

40
00:02:01,330 --> 00:02:03,670
We could again use a value of five pixels.

41
00:02:03,670 --> 00:02:06,380
Maybe we'll of course define these differently

42
00:02:06,380 --> 00:02:08,030
than in the final code.

43
00:02:08,030 --> 00:02:09,960
If you use five pixels, it's like this,

44
00:02:09,960 --> 00:02:12,200
if you would use 20 pixels, for example,

45
00:02:12,200 --> 00:02:13,349
you see it will look like that.

46
00:02:13,349 --> 00:02:15,540
So feel free to play around here.

47
00:02:15,540 --> 00:02:17,488
We'll go with five pixels for the moment.

48
00:02:17,488 --> 00:02:19,997
And then finally, as a fourth value,

49
00:02:19,997 --> 00:02:24,370
we can define the color of our box shadow.

50
00:02:24,370 --> 00:02:26,709
By default, it's this black tone here.

51
00:02:26,709 --> 00:02:30,629
I'll again use RGB or specifically RGBA,

52
00:02:30,629 --> 00:02:33,890
which allows me to define the color as we know it before.

53
00:02:33,890 --> 00:02:38,823
So we could, for example, say 0, 0, 0 to have a black tone.

54
00:02:39,840 --> 00:02:44,030
And then I have to define the opacity of this color.

55
00:02:44,030 --> 00:02:46,069
An opacity of one, for example here,

56
00:02:46,069 --> 00:02:49,400
would simply well mean a black shadow.

57
00:02:49,400 --> 00:02:51,060
If it would set it to zero dot two,

58
00:02:51,060 --> 00:02:53,747
we see this very light box shadow here,

59
00:02:53,747 --> 00:02:57,888
and zero dot two would actually be a good value here.

60
00:02:57,888 --> 00:02:59,950
And as you've seen with this box shadow,

61
00:02:59,950 --> 00:03:01,280
we can tailor this a bit more.

62
00:03:01,280 --> 00:03:06,280
I think for the X axis, a very slight movement

63
00:03:06,670 --> 00:03:09,560
of one or two pixels maybe should be enough.

64
00:03:09,560 --> 00:03:13,480
Same thing here for our Y axis.

65
00:03:13,480 --> 00:03:16,020
And maybe here we'll also make the radius of it smaller

66
00:03:16,020 --> 00:03:19,830
with four pixels, so it's very subtle so to say.

67
00:03:19,830 --> 00:03:22,143
But it gives the page a very good look.

68
00:03:23,310 --> 00:03:25,543
Maybe even just one pixel here, let's see.

69
00:03:27,140 --> 00:03:29,413
And also one pixel there, and also just one pixel there.

70
00:03:30,660 --> 00:03:31,790
Yeah, I think it's better.

71
00:03:31,790 --> 00:03:33,790
So it gives the page a very good look

72
00:03:33,790 --> 00:03:36,940
and a bit more of this 3d look for our elements.

73
00:03:36,940 --> 00:03:39,379
So this is a very nice thing when it comes to designing

74
00:03:39,379 --> 00:03:41,997
such different elements here.

75
00:03:41,997 --> 00:03:46,640
And also something we often prefer when we compare it

76
00:03:46,640 --> 00:03:49,723
to borders, which don't give our elements this nice look.

77
00:03:50,840 --> 00:03:54,580
However, we still have to add this code to our actual code.

78
00:03:54,580 --> 00:03:58,940
So let's reload this and let's go back to the code

79
00:03:58,940 --> 00:04:01,203
and here for our list items.

80
00:04:02,340 --> 00:04:07,340
We'll now add the box shadow here, box shadow.

81
00:04:07,700 --> 00:04:10,493
And we will use, I think it was one pixel,

82
00:04:12,540 --> 00:04:15,370
let's maybe say one pixel, one pixel, four pixels,

83
00:04:15,370 --> 00:04:20,343
and now RGBA here with a value of 0, 0, 0,

84
00:04:23,460 --> 00:04:27,423
and zero dot two 40 opacity.

85
00:04:29,460 --> 00:04:33,613
With this, we improve the look of our website even more.

86
00:04:34,650 --> 00:04:37,566
So this is the box shadow property.

87
00:04:37,566 --> 00:04:41,330
Before we continue with our today's challenge page here,

88
00:04:41,330 --> 00:04:43,635
where we also apply to concepts you learned about

89
00:04:43,635 --> 00:04:47,555
in this module, I would like to clean up our margins

90
00:04:47,555 --> 00:04:49,720
in the header though.

91
00:04:49,720 --> 00:04:51,820
Because here we have a margin top and bottom

92
00:04:51,820 --> 00:04:53,850
in the h1 element.

93
00:04:53,850 --> 00:04:56,700
We have the margin on the paragraph and here also

94
00:04:56,700 --> 00:04:57,950
on our anchor tag.

95
00:04:57,950 --> 00:04:59,750
And with the new knowledge gains,

96
00:04:59,750 --> 00:05:02,304
it would actually be sufficient to add a margin

97
00:05:02,304 --> 00:05:04,603
just to our paragraph here.

98
00:05:05,900 --> 00:05:08,155
The margins for the anchor tag and the h1 element

99
00:05:08,155 --> 00:05:10,173
are therefore not required.

100
00:05:11,200 --> 00:05:13,360
Let's do this first by the setting,

101
00:05:13,360 --> 00:05:16,513
the margin on the h1 element to zero here.

102
00:05:17,500 --> 00:05:20,890
Then by maybe increasing this margin a bit to 12 pixels,

103
00:05:20,890 --> 00:05:23,583
for the paragraph, this one here.

104
00:05:24,830 --> 00:05:28,680
And now we'll also set the margin of our anchor tag

105
00:05:28,680 --> 00:05:31,970
here to zero like this.

106
00:05:31,970 --> 00:05:33,720
With that, the look didn't change a lot,

107
00:05:33,720 --> 00:05:36,150
but now we don't have a margin on the h1 element,

108
00:05:36,150 --> 00:05:41,150
the top and bottom margin on our paragraph, by the way,

109
00:05:41,220 --> 00:05:46,060
top and bottom margin should be sufficient here like this.

110
00:05:46,060 --> 00:05:47,250
Yeah, it's better.

111
00:05:47,250 --> 00:05:49,450
And no margin here for the anchor tag.

112
00:05:49,450 --> 00:05:51,470
Here, we have the bottom margin on the header,

113
00:05:51,470 --> 00:05:53,315
to define the distance between the header

114
00:05:53,315 --> 00:05:55,630
and the main element.

115
00:05:55,630 --> 00:06:00,630
With this, we finished this page, now as a next step,

116
00:06:01,100 --> 00:06:04,714
we'll have a look at our today's challenge, here.

117
00:06:04,714 --> 00:06:08,970
Here is now the time for you to apply the knowledge

118
00:06:08,970 --> 00:06:12,720
we gained, to change the style of this page significantly.

119
00:06:12,720 --> 00:06:15,224
So in the next lecture, I'll show you what this page

120
00:06:15,224 --> 00:06:17,155
should look like first.

121
00:06:17,155 --> 00:06:19,750
Then you have the chance to try this on your own,

122
00:06:19,750 --> 00:06:22,583
and then we'll add the styling to this page together.