1
00:00:02.01 --> 00:00:03.02
- Hi, this is Chris Tonbers,

2
00:00:03.02 --> 00:00:05.02
and in this episode we'll
create an angled header

3
00:00:05.02 --> 00:00:07.03
for our webpage using a pseudoelement

4
00:00:07.03 --> 00:00:09.05
along with some position and
transformation properties

5
00:00:09.05 --> 00:00:10.08
in CSS.

6
00:00:10.08 --> 00:00:11.08
So if you'd like to follow along,

7
00:00:11.08 --> 00:00:13.03
download the exercise files,

8
00:00:13.03 --> 00:00:15.05
and we'll begin by opening the html file

9
00:00:15.05 --> 00:00:17.02
in a text editor.

10
00:00:17.02 --> 00:00:19.04
So once you have the html file open,

11
00:00:19.04 --> 00:00:20.07
up in the head area,

12
00:00:20.07 --> 00:00:23.03
we have a link to a style.css file

13
00:00:23.03 --> 00:00:24.09
which we'll be opening in just a second.

14
00:00:24.09 --> 00:00:27.03
Inside the html, we have a header element

15
00:00:27.03 --> 00:00:28.05
inside of the body.

16
00:00:28.05 --> 00:00:31.00
We're going to be working
inside of this area here.

17
00:00:31.00 --> 00:00:33.05
And inside of the header,
we have an H1 and an image,

18
00:00:33.05 --> 00:00:37.02
which is the image of the spices here.

19
00:00:37.02 --> 00:00:39.04
So at this point, let's go
back to the exercise files.

20
00:00:39.04 --> 00:00:41.08
Let's find style.css.

21
00:00:41.08 --> 00:00:43.06
Let's open this in our text editor.

22
00:00:43.06 --> 00:00:49.04
Let's scroll down. Let's
find the header rule here.

23
00:00:49.04 --> 00:00:51.05
What we're going to do first
is come into the header rule

24
00:00:51.05 --> 00:00:53.07
and remove the background color.

25
00:00:53.07 --> 00:00:55.00
And we actually want to use the same color

26
00:00:55.00 --> 00:00:57.01
inside of a pseudoelement.

27
00:00:57.01 --> 00:01:01.02
So let's come in here and cut that color

28
00:01:01.02 --> 00:01:03.06
and then remove the
background color property,

29
00:01:03.06 --> 00:01:05.06
and now what we're going to do is

30
00:01:05.06 --> 00:01:09.02
add our rectangle back
in using a pseudoelement.

31
00:01:09.02 --> 00:01:15.01
So let's add another
rule, header, two colons,

32
00:01:15.01 --> 00:01:18.09
then type before, and a space.

33
00:01:18.09 --> 00:01:22.04
Let's add in our brackets.

34
00:01:22.04 --> 00:01:25.08
First property's going to be
content inside of this rule.

35
00:01:25.08 --> 00:01:29.05
Two single tick marks and and semicolon.

36
00:01:29.05 --> 00:01:33.04
Next we'll set the
display type to a block.

37
00:01:33.04 --> 00:01:37.09
Next line, let's add background color,

38
00:01:37.09 --> 00:01:40.01
and we'll set this to the
color we copied earlier,

39
00:01:40.01 --> 00:01:43.01
which is pound sign 62
for red, 23 for green,

40
00:01:43.01 --> 00:01:46.00
and 0D for blue.

41
00:01:46.00 --> 00:01:50.00
Next line, let's set a width to 100%,

42
00:01:50.00 --> 00:01:55.01
and then we'll set a height to 600 pixels.

43
00:01:55.01 --> 00:01:56.06
I'll save my css at this point,

44
00:01:56.06 --> 00:01:58.00
and now we'll see this giant rectangle

45
00:01:58.00 --> 00:02:03.02
showing up here inside of the header area.

46
00:02:03.02 --> 00:02:04.03
So now back in our pseudoelement,

47
00:02:04.03 --> 00:02:07.05
let's add a few more properties.

48
00:02:07.05 --> 00:02:09.04
Next we'll add a position property.

49
00:02:09.04 --> 00:02:13.09
We're going to set this to absolute.

50
00:02:13.09 --> 00:02:17.04
Then we'll set a left
property of zero pixels,

51
00:02:17.04 --> 00:02:19.09
and then we're going to
set a bottom property

52
00:02:19.09 --> 00:02:24.07
of 70 pixels.

53
00:02:24.07 --> 00:02:26.01
Now since we're absolute positioning

54
00:02:26.01 --> 00:02:27.08
this pseudoelement, we're
going to need to go back

55
00:02:27.08 --> 00:02:29.03
to the header rule and add

56
00:02:29.03 --> 00:02:31.08
a position relative property here.

57
00:02:31.08 --> 00:02:33.08
This way the pseudoelement will position

58
00:02:33.08 --> 00:02:36.09
in relation to its parent.

59
00:02:36.09 --> 00:02:41.02
So position colon space relative.

60
00:02:41.02 --> 00:02:42.08
At this point, we can hit save.

61
00:02:42.08 --> 00:02:44.05
We'll now see that the box that we created

62
00:02:44.05 --> 00:02:46.04
with our pseudoelement
is no being positioned

63
00:02:46.04 --> 00:02:50.04
in relation to the header.

64
00:02:50.04 --> 00:02:51.09
Let's go back to our css.

65
00:02:51.09 --> 00:02:54.02
Let's add a few more properties.

66
00:02:54.02 --> 00:02:55.09
Next, in order to rotate this,

67
00:02:55.09 --> 00:02:58.09
we're going to use a transform property.

68
00:02:58.09 --> 00:03:02.02
So transform colon space.

69
00:03:02.02 --> 00:03:06.03
We'll use the skew property, so S-K-E-W,

70
00:03:06.03 --> 00:03:10.01
then a capital letter
y, set of parentheses,

71
00:03:10.01 --> 00:03:11.08
and a semicolon.

72
00:03:11.08 --> 00:03:13.01
Inside of the parentheses,
we're going to set

73
00:03:13.01 --> 00:03:15.01
this to negative eight degrees.

74
00:03:15.01 --> 00:03:18.08
So minus eight then deg.

75
00:03:18.08 --> 00:03:20.04
Let's save our work.

76
00:03:20.04 --> 00:03:21.06
Back in the browser, we'll now see that

77
00:03:21.06 --> 00:03:24.08
the rectangle is now at an angle.

78
00:03:24.08 --> 00:03:26.06
And then back in our css,

79
00:03:26.06 --> 00:03:29.03
to make sure that the
rectangle now shows behind

80
00:03:29.03 --> 00:03:30.08
all of the other elements,

81
00:03:30.08 --> 00:03:32.09
let's come in here and
add a z index property

82
00:03:32.09 --> 00:03:35.07
to minus one.

83
00:03:35.07 --> 00:03:36.07
Save your work again, and
then back in the browser,

84
00:03:36.07 --> 00:03:40.01
we'll now see our new angled header.

85
00:03:40.01 --> 00:03:42.05
And now you can make
adjustments to the transform

86
00:03:42.05 --> 00:03:45.01
and positioning values
based on your design.

87
00:03:45.01 --> 00:03:46.06
And of course, you can
add media queries in

88
00:03:46.06 --> 00:03:49.04
to adjust the layout for
varying screen sizes.

89
00:03:49.04 --> 00:03:51.04
And so with that, I'll
conclude this episode,

90
00:03:51.04 --> 00:03:54.04
and as always, thanks for watching.