- Hi, this is Chris Tonbers,
and in this episode we'll create an angled header
for our webpage using a pseudoelement
along with some position and transformation properties
in CSS.
So if you'd like to follow along,
download the exercise files,
and we'll begin by opening the html file
in a text editor.
So once you have the html file open,
up in the head area,
we have a link to a style.css file
which we'll be opening in just a second.
Inside the html, we have a header element
inside of the body.
We're going to be working inside of this area here.
And inside of the header, we have an H1 and an image,
which is the image of the spices here.
So at this point, let's go back to the exercise files.
Let's find style.css.
Let's open this in our text editor.
Let's scroll down. Let's find the header rule here.
What we're going to do first is come into the header rule
and remove the background color.
And we actually want to use the same color
inside of a pseudoelement.
So let's come in here and cut that color
and then remove the background color property,
and now what we're going to do is
add our rectangle back in using a pseudoelement.
So let's add another rule, header, two colons,
then type before, and a space.
Let's add in our brackets.
First property's going to be content inside of this rule.
Two single tick marks and and semicolon.
Next we'll set the display type to a block.
Next line, let's add background color,
and we'll set this to the color we copied earlier,
which is pound sign 62 for red, 23 for green,
and 0D for blue.
Next line, let's set a width to 100%,
and then we'll set a height to 600 pixels.
I'll save my css at this point,
and now we'll see this giant rectangle
showing up here inside of the header area.
So now back in our pseudoelement,
let's add a few more properties.
Next we'll add a position property.
We're going to set this to absolute.
Then we'll set a left property of zero pixels,
and then we're going to set a bottom property
of 70 pixels.
Now since we're absolute positioning
this pseudoelement, we're going to need to go back
to the header rule and add
a position relative property here.
This way the pseudoelement will position
in relation to its parent.
So position colon space relative.
At this point, we can hit save.
We'll now see that the box that we created
with our pseudoelement is no being positioned
in relation to the header.
Let's go back to our css.
Let's add a few more properties.
Next, in order to rotate this,
we're going to use a transform property.
So transform colon space.
We'll use the skew property, so S-K-E-W,
then a capital letter y, set of parentheses,
and a semicolon.
Inside of the parentheses, we're going to set
this to negative eight degrees.
So minus eight then deg.
Let's save our work.
Back in the browser, we'll now see that
the rectangle is now at an angle.
And then back in our css,
to make sure that the rectangle now shows behind
all of the other elements,
let's come in here and add a z index property
to minus one.
Save your work again, and then back in the browser,
we'll now see our new angled header.
And now you can make adjustments to the transform
and positioning values based on your design.
And of course, you can add media queries in
to adjust the layout for varying screen sizes.
And so with that, I'll conclude this episode,
and as always, thanks for watching.