From the course: CSS Shorts

Angled headers - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Angled headers

“

- 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.

Contents