- Read Tutorial
- Watch Guide Video
In this guide, we are going to be building out the background header you see here using clip paths and CSS. So to get started go ahead and create a file called header.scss and import this file into our main.scss.
So the first thing we need to do after this is go into our app.js and give our form here some tags that we can actually style. So the first thing we want to do is add in an h1 here and in here let's go ahead and say Birthday Countdown.
This will give us this message right here. All right save that and if it reloads you'll notice that there are two h1 tags. Let's go back to wherever we stored this and it should be in our birthdayForm. So birthdayForm.js and let's just go ahead and get rid of this h1 tag.
Back in our header.scss or actually back in our app.js. let's go ahead and put some JSX in here that we can give class names and mess around with CSS. So, first of all, we want to wrap this whole thing in a header tag. So go ahead and cut this.
Put it in there.
And in this header tag we want to have a
<div className="header_skew"
<div className="header_subskew"
</div>
</div>
Then let's just copy this and actually put the h1 tag above this div right here.
So between the header the opening header tag and the first div. So the first thing we want to style is our h1 tag. So let's go into our header.scss and let's type in h1 and give it some brackets and the first thing you'll notice in our design is that it is white. So let's give it a white color and it will disappear since we won't be able to see it. So yeah let's just comment this out for now and let's put in a padding of 75 pixels to give it a box around it. Save it and you'll see that it's now in the position we kind of want it to be in and now let's just reduce the size of it so font size 18 pixels font weight 100 and let's give a line height of 22 pixels and just to make sure it's on top. Since we'll be adding in the skew in a second let's give it a z index of 10. So basically the z index will just make sure it's on top of every other element. Now looking at this you'll see it's in the exact same position. Literally the exact same position as a click over here. So that's good. We just need to uncomment this and save it and it will all disappear since the background is white but it's still there and it will appear once we get in our other styles.
h1 {
color: white;
padding: 75px;
font-size: 18px;
font-weight: 100;
line-height: 22px;
z-index: 10;
}
So we have our header_skew and our header_subskew. So the first thing we want to do is give this a width of 100 vw and a height of 100 vw and then let's give it a background-color of var color primary. I believe that's what it is. If you check back in your base.scss you'll see that we have these variables and we went over how to use these in the last guide. All right I accidentally changed that but I got rid of that. Blue-Primary and blue-secondary are what we're looking for. So this needs to be primary and yeah it's not color it's blue. All right blue-primary and blue-secondary. Go ahead and just copy this and put it in here and save that and change this to secondary all right sweet.
.header_skew {
width: 100vw;
height: 100vw;
background-color: var(--blue-primary);
}
.header_subskew {
width: 100vw;
height: 100vw;
background-color: var(--blue-secondary);
}
So you'll notice that we have our secondary color here. If I were to comment this out and save it you'll notice that we are seeing this color now slightly darker of a blue. All right so uncomment that and there's a problem here and it's the h1 tag is appearing above it. So let's figure out how we can make that not happen the way we can fix this is by giving our h1 tag a position: absolute;. So basically what absolute can give us is it's going to allow this to flow over this basically. And if you want to read up about that you can type in position W3 should bring up something good. The first example is position absolute which is exactly what we need. So it says this is a heading with an absolute position with absolute positioning an element can be placed anywhere on the page. The heading below is placed 100 pixels from the left of the page and 150 pixels from the top of the page. So if we were to put in zero right here it would probably I assume it's going to appear somewhere above or below this position property h1 tag. Let's put top 0 and not left 0 left is on the left obviously. So hit run and yeah so it's right above this h1 tag it appears so same idea with our app we're just ignoring the fact that there are other elements and then we have the padding doing it for us but if we were to do it like this example with left and top it would look the same. So we are going to get rid of the padding hit save and it's going to be up here. You kind of see it and instead of padding if we put left 75 pixels and top 75 pixels. I'm not sure if this is going to be the exact position but it might yeah it looks like it's the exact same position. So let's go with the top and left method because later on, we're going to implement a mixin that takes these in as parameters and it will make it easier to implement in this h1 tag when we get around to that.
Since we're talking about mixins we might as well make a mixin for this right here so let's call this @mixin header-background and just give it a variable. So if we include this in header @include header-background and then we copy it into here you may already know what's going to happen and we're going to see a dark blue. All right. So the shade slightly changed and that's because it's using the same exact variable the blue primary. So what we can do to fix that but still use the mixin is by giving this a parameter so we can call this $color and we use a dollar sign so color and then we can pass on a color each time we do this so we can say var(--blue-primary)and we can copy this and call it secondary in here. All right so that should fix our problem. And the first thing we've got to do before saving that or the last thing rather is give this a value of color so it's not using the variable. So save that and you'll notice our light blue is back and one way we can kind of make this easier just to kind of show you how this works is by putting any default value for color and we could just put blue primary and then now we don't even have to pass this in this header-background we're including in the skew right here. So if you comment this out and we actually have to call it like a function. So make sure those parentheses are there and it should be there. All right, so the reason isn't working is cuz we have to put the variable call right there. So all right, yeah we didn't close that off right. My bad! All right, yeah it's working sweet. So go ahead and uncomment that and no that's how it's working. Let's see if we even need this or not. Let's see if we don't need it. We don't even need to call it like a function if it doesn't have a color so we can leave like that and we can uncomment this and we have the base of our header set up.
h1 {
color: white;
font-size: 18px;
font-weight: 100;
line-height: 22px;
z-index: 10;
position: absolute;
left: 75px;
top: 75px;
}
@mixin header-background($color: var(--blue-primary)) {
width: 100vw;
height: 100vw;
background-color: var(--blue-primary);
}
.header_skew {
@include header-background;
}
.header_subskew {
@include header-background(var(--blue-secondary));
}
So let's go ahead and add in the clip paths to get this effect right here.
It's actually pretty simple and I will walk you through it right now. So for the first one let's actually make this a clip path let's give a clip path variable as well so we're not getting the same clip paths. So clip path and then let's give it a default well let's leave out the default value and let's just call it in here for now. So a clip path polygon and let's give it a google search real quick here on W3 so W3 clip path CSS. All right so let's see not clip property but clip path, all right let's just go to the Mozilla docs. So you see clip path circle 40 percent.
Let's see what happens when we increase this to 100 or 1000. All right. So 99 it's going to slightly give us a circle there let's put it to 80, 60. All right so you can kind of see what's going on. This is just one of the things we can use in clip path we can also use ellipse and polygon is what we're looking for. So you can kind of see why we'd be using polygon if we put in a zero here. We can see it pulls all the way to the left and back in or app the completed app you'll see that's kind of what we want there. So we want to get this first one. Ignore the blue right here. You want to get this complete clip path in here. Imagine this being the same color and then we'll move on to that one. So we want to dot up here we want it to reach there, right there, and right there. All right back here let's put 100 percent right here and that should reach all the way over. All right. Sweet. So then I typed in zero percent zero percent and you don't even need the percent we can get rid of that so you can kind of see we almost have that effect. It's just a little bit different. We want it to pull up all the way over there though. So how can we do this? Let's type in a 100 real quick to get that bottom there and we could even do like 40 or something and then put it in the blue or like 70 and then put in the blue that you see here. But it makes a lot easier to read if we just put 100 because then we know it's at 100 and it makes a lot easier to read.
So now we just need to basically move this to right here or move this right here and then add in another right here. All right. So the way we can do that let's put a zero here and it should take. Yes. It took it took us up there and then for this bottom one if it's 100% then that means we want to put a dot here which means it's going to be this one right here. So 16 percent or 17 let's try 20. All right sweet so that's a clip path we want so go ahead and copy that.
If you haven't typed it out just copy over these values into your code. So let's see what we copied the whole clip path. All right let's just put it in here and then let's cut this out and put in the clip path variable that we passed in right here and let's give this a default value and actually let's not give this a default value let's just type it in here. So polygon all right save that and we'll see what we get in our app. All right build failed required parameters must precede optional parameters. All right maybe it's because we're not including here. All right no must proceed. So we've got to put in this so technically we have to put this in but let's just give this a default value to get past this error right now and let's just get rid of this.
Let's wait for that to re-load and we got our path and that's way too far over. Let's go to 15 percent let's let's put it at 16. We wanted a little more over than. Oh, it's going over let's put it at 16 and we should be good and the reason it's doing this is that we actually set our high to view width and let's change that to view height and yeah we're golden.
@mixin header-background($color: var(--blue-primary), $clip-path: polygon(0 100%, 0 0, 50% 0, 16% 100%)) {
width: 100vw;
height: 100vh;
background-color: var(--blue-primary);
clip-path: $clip-path:
}
.header_skew {
@include header-background;
}
Let's go ahead and develop the next clip path for our secondary header subskew. All right so uncomment that we've got our header because that's the default value. Let's just go back into the Mozilla docs here and see what we can get. All right so we want to get this look here. So we want it to be about 50 percent or so I think 40 percent is what I use when I build out this app and then we want this to be the same percentage and then the corner. So this one won't be too hard to implement. Let's go ahead and change it right off the bat because we know it's 16 because that's what we changed it to here and then let's leave this at 100 get rid of this. All right so we already almost have this effect. All we need to do now is pull it down here and that's going to be done right here. So let's type in 40 percent. All right perfect that's exactly what we want. Go ahead and copy that or actually just copy the polygon because we're going to put it in this method call, paste that in there. Save it let's go back to our app and see if it's working. Awesome that's working exactly how we want it's a little bit different. But it's probably closer to the design.
.header_skew {
@include header-background(var(--blue-secondary), $clip-path: polygon(0 100%, 0 0, 0 40%, 16% 100%));
}
All right it's resizing well. Okay, we have our header set up and in the next guide, we are going to start styling our skew here that displays the countdown. So we're going to be styling the input after we do that. So what we're going to be styling in the next video is what you see here and I'll change that to another date.
So we might not get into the styling of the inputs but will for sure get the skew in there in the next video. So that's what we will be doing. I'll see you in the next video. Oh but let's commit our code real quick. So go ahead and
git status git add . git commit -m "added styles for header"
All right I'll see you in the next video where we will be getting in the skew.