- Read Tutorial
- Watch Guide Video
First of all, think about how we're going to do this. I'm in Firefox and what I'm thinking I want to do is I want to put in the background first. So the skew. You'll see up in our design here we have a skew going on here. Let's add that in. My screen is are a bit off the screen just so you can see the rest of the content.
We want to add in this skew, so what we need to do is close the terminal here. What I'd also like is to close bootstrap.js, close input.js, and close card.js. Next thing I'd like to do is go to header.js. In here we need to provide another div. If I put a div here, it's going to mess up our grid a little bit I believe. So I'm going to give this div a className="header__skew".
header.js
return ( <div className="header"> <div className="header__skew"></div> <h1>Bottega Madlibs</h1> <p>Fill out the fields below and click the generate button to see the Mad Lib story.</p> </div> ) }
Now the only problem with doing this is, if we go to our application, I guess it didn't mess it up. I'm going to inspect the element here, and I'm going to see if the div throws things off. We have our header. It seems to have not thrown anything off, in or out of it. I guess it threw it up there.
Let's let's see our header. Okay, so we didn't put a grid on our header, that works great. What I'd like to do is add in that skew, so let's go here and look at our design. It kind of needs to needs to be about 495 pixels high and have a background color that's gray-ish. Okay, let's do this: let's go to our app. We have header__skew. Now, since its header skew we can put it in our header and put:
main.scss
.header {
align-self: center;
&__skew {
height: 495px;
width:100vw;
background-color: #444444;
}
}
This isn't exactly going to render correctly. See. Well, I guess it kind of does, but it throws this off, so it doesn't render correctly.
What we needed to do is simply go behind our continent here. which we can easily do by using position: absolute. So in our skew, we are going to say:
main.scss
.header {
align-self: center;
&__skew {
position: absolute;
height: 495px;
width:100vw;
background-color: #444444;
}
}
That should automatically fix it. Oh nevermind, I might have been mistaken. What we need to do. Okay, so we inspect our element and we click this little box right here, this little selector box right here, and then select the skew it will bring us to the code.
What's going on here is: the header is only as big as it is right. So it's positioning absolutely, but it's in relation to the header. We need it to be in relation to the entire application, or into the home. So what we need to do is on home say:
main.scss
.home {
position: relative;
background-color: rgba(207, 207, 207, 0.06);
display: grid;
Now I believe that should fix it. Let's check in here. Reload the page, and it doesn't, but we can quickly say in our header skew we say:
main.scss
.header {
align-self: center;
&__skew {
top: 0;
left: 0;
position: absolute;
height: 495px;
width:100vw;
background-color: #444444;
}
}
You'll see that it is now where it needs to be. So with that set up let's think about what we need to do.
Now you'll see it's over our content, which isn't good. Which is where the z-index comes in. Super simple tool here. What we need to do in skews is say:
main.scss
.header {
align-self: center;
&__skew {
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 495px;
width:100vw;
background-color: #444444;
}
}
Basically, what the z-index is: it's like exactly what it is. It is the z-axis. Like the x-axis and the y-axis. The z-index is specifying where it is on the z-axis. Obviously, like minus 1 would probably work but because everything is going to start at least at 0 and 1 2 3. If we specified a negative, it will work good.
Now, if we said that the header here. So if I inspect the element it's already opened and I select this Bottega Madlibs Header. This little h1 tag, and I go to rules right here and if I say z-index is -9. You'll still see it, because our z-index on the header skew was 10. If I do -10. It's going to be the same because it still comes after it.
Now if header__skew is in back. Yes, header__skew has a -10 as well, but since it comes before it it's going to render it before the H1. Now if I say -11, it should display behind it but it's not. Hmm, interesting. What I'll do is I'll go in here and I'll say:
main.scss
.header {
align-self: center;
h1 {
z-index: -11;
}
&__skew {
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 495px;
width:100vw;
background-color: #444444;
}
}
I believe that should put it behind it. Well, that's curious. Anyway, that's really strange. Well, we know that negative works. That's how z-index works. There's probably something I'm missing here for some reason. That's common in development. You'll have some overriding style. I'm probably saying z-index somewhere else, but basically, that works.
Now all we need to do is skew it, so if you search clip path in Google, then you see here clip-path CSS - cascading style sheets. You'll see that we have this clip-path thing.
Now I don't want to use this reference because it's not as good as this one thing I found. I've used it before. It's Bennettfeely.com. I used this site today actually. What this is, is it allows you to create a clip path and then render it using clip-path down here.
Look down here when you change the values you'll see that it changes. So we could use this but I don't think it's what we're going to use.
Let's look at our design and see what the clip-path looks like. Okay, so it's kind of like this big long skew. So something like when you click on parallelogram, and just adjust it from there. It's going to go right there obviously, it's going to go like right here, and then it's going to go like here. So that's what it looks like. Yeah, that looks good.
Let's just make this look a little more close, like a little more accurate on those values. So 25% and let's try 50% . So now we just need a copy these two.
Web kit is going to be for Firefox and click-path is going to be for Chrome. I believe that is how it works. If I'm correct even if you use click-path, that might work in Firefox but when you push it to production and you actually have the website showing on a URL it might not display unless you have a Web Kit. I think that's how it works.
Let's copy these both over and use them. Let's head over here and let's put it in the skew.
main.scss
.header {
align-self: center;
&__skew {
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 495px;
width:100vw;
background-color: #444444;
}
}
You'll see that it works, although, what you notice is that it only goes up to here, and it's not the middle. The reason it's doing that is because: if you inspect it, this height of this thing is only goes down to about here. So it is in the middle. It's just that the height of our component, our header__skew, is only 495 pixels.
What we need to do is make it the height of the entire application here. So instead of saying 495 pixels right here in header__skew, let's say something like:
main.scss
.header {
align-self: center;
&__skew {
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 100vh;
width:100vw;
background-color: #444444;
}
}
That looks pretty good. Let's see where it cuts off on her design. So it cuts off a little lower. It looks like, maybe, that is actually perfect right below 5. You'll see our inputs are way far apart, and it looks like it might belong a little bit closer to the bottom.
What we can do is make it like 110vh. Let's try that in our header. That looks good for now. We'll adjust it as needed, but now what we need is that kind of green look down there. So what we need to do is put that there by just putting a border bottom. That should work. So let's do that now. Let's go to our app, and let's say:
main.scss
.header {
align-self: center;
&__skew {
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 110vh;
width:100vw;
background-color: #444444;
border-bottom: 10px solid #00CB79;
}
}
I think I have a tool called Color Note. This will allow me to color select. Let's see, I'm going to go here and then do it. I feel like that makes you feel like that app is always wrong. OK, so now if we reload the page, you'll see that we don't border bottom which is truly an unfortunate event.
The reason we don't is because we've skewed it off. If we comment out this skew, we'll see it, but it's going to be off the screen because this is 100vh. If we put this to something like 10vh, now we go here, and we'll see it. See it right there.
Another tool we can use is called skew. We can say:
main.scss
.header {
align-self: center;
&__skew {
//-webkit-clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
//clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
transform: skewY(40deg);
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 10vh;
width:100vw;
background-color: #444444;
border-bottom: 10px solid #00CB79;
}
}
Now in our application, you'll see that it skews it a bit. What we need to do, is skew it differently. We need to skew the y axis. Let's try 40 degrees. OK. That looks terrible.
What I'd like to do is not do that, and let's see what we can do. OK. I'd like to do this. I don't want to skew it, I want to use clip-path. What we can do is: we can just put another item on our clip-path. OK, so try and think about this. We have it 50% our height is 110vh. If we provide another div in our header.js, and we call it:
header.js
return ( <div className="header"> <div className="header__skew"></div> <div className="header__border"></div> <h1>Bottega Madlibs</h1> <p>Fill out the fields below and click the generate button to see the Mad Lib story.</p> </div> ) }
All we need to do is put it at 50% of 110. So 55% is where it would belong on the screen. So let's do this let's copy this entire thing and let's say:
main.scss
.header {
align-self: center;
&__skew {
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 10vh;
width:100vw;
background-color: #444444;
}
&__border {
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 110vh;
width:100vw;
background-color: #00CB79;
}
}
Now we need to just cut off the clip-path more, so if we look at this tool we need to do this:
Does that makes sense? We need to put these down more. So this is about 20%. This is going to be very big. So you can see as the numbers are moving down there. Those are the two numbers we need to change. We have Oops did I do something. These are the two numbers going to change this. Let's just manipulate it in here and just test it out. Let's say:
main.scss
&__border {
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
clip-path: polygon(0 49%, 100% 0%, 100% 25%, 0 50%);
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 110vh;
width:100vw;
background-color: #00CB79;
}
}
Then I'm going to see if that works in Firefox since we are not applying it to the Web Kit. Looks like it does in chrome. Looks like it does in here too. Awesome, so you can see where this is going. I haven't done this before actually. This is cool, but I'm surprised that I am actually kind of figuring this out.
What we need to do is change the second one now and make it look good. My guess would be to add it to this like 49 plus 25. That's actually not going to be right. It's going to be 49 minus 25 because it's already 25 pixels right or 25%.
Wait, that doesn't make any sense that we would change that one actually because it's at the top which means has to be a 0%. Which means it's the second one, which means that we need to put this one at 49.
Wait, but not 49. When you do 49 plus 25, it's up 25, so 74%. I meant it's minus 74 minus 25 because we wanted to obviously be closer to the top. So it's 49 minus 25. So let's make this 24%.
main.scss
&__border {
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
clip-path: polygon(0 49%, 100% 24%, 100% 25%, 0 50%);
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 110vh;
width:100vw;
background-color: #00CB79;
}
}
It's going to be slightly above this. This was going to be slightly above 50. Now that works. It looks a little strange, almost kind of pixilated. Not sure. Let's see smooth skew css. Use web-kit-backface-visibility: hidden; to get rid of the hard edges in CSS transformations on Chrome. Let's try that. I'm just kind of trying to figure out why it's a little bit jagged.
Let's add that to the border and to this. I just typed in backace-visibility along with webkit. Okay. Interesting. Let's get rid of those and it's fine tune it once we've added in the rest of the style. I don't want to go any longer with these clipped paths.
Now we have a couple different ways of doing it. We have skews and we have clip-path. Just wanted to make sure you were aware of the different options we had. Let's make it a little bit bigger so we want to do is change 49 to 48 and 24 to 23. So if you keep doing that going down a bit it's going to make it bigger and bigger. So that makes sense.
main.scss
&__border {
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 25%, 0 50%);
clip-path: polygon(0 48%, 100% 23%, 100% 25%, 0 50%);
transform: skewY(40deg);
z-index: -10;
top: 0;
left: 0;
position: absolute;
height: 110vh;
width:100vw;
background-color: #00CB79;
}
}
That's how you get the header in there. In the next guide what we'll do is we will put in the styles for the actual header, so not just the background of the header. Let's go to our terminal in VS code and let's say git status, git add ., and let's say git commit -m "created background headers skews". Ok, I'll see you in the next guide.