In this session we show how to create a header background using the Ultimate CSS3 Gradient Generator at colorzilla.com and then configure the header by adding some more CSS to style it. This shows how you can create and style your header without using an image and this applies to footers as well.
Okay so the next thing we’re going to do then is we’re going to come over to this site and we’re going to do something else with CSS gradients. In this case, what we’re going to do is we are going to make a CSS gradient that stretches all the way across the page here. And it’s going to look like this. Let’s see, so we come back over to a new site. Okay so that was this csstricks.com examples button maker. This one is the ultimate CSS gradient generator and this was created by the guy who created Colorzilla and I think it is totally cool. If you’re at all familiar with gradients in any of the Adobe products, this system will look very familiar because this is the system that Adobe uses for producing its gradients.
And the first thing we’re going to do is put a gradient background behind the header and I’m going to…so what we’re going to do is we’re going to get rid of these color stops. It’s going to be simple gradient at this point. It’s going to be vertical gradient and let’s say it’s 200 pixels tall. So this is what’s going to go across the top of our page if it was like this. And you can easily change this color by simply you know, picking a color picker and you know, picking a different color and again, picking a different color here so we come over to that, right? So you can easily change it to a darker purple.
If for some reason or another you wanted another… so you wanted a solid color and then a graduated color, you could add a color stop and then let’s come over to this color stop, grab this color, that’s the dark color. Okay and then come over to this color stop, place the dark color in. So now you’ve got the solid color for this distance and then you have the gradient or graduating color here. That didn’t work. Say OK. I must have hit cancel instead of OK.
So now you’ve got the dark color and you can move tis if you want to make it a little bit… well, change the grey a little bit. So that’s what this thing is going to look like.
And now what we’ll do is we’ll just take this code here and copy that code because this is code that will create this for us. And so we come back over here to Firefox and custom CSS and what I want to do is I want to put this in the header area. So I’m using the full width framework here right now.
And so if I come up here to the top, you can see I’ve got this header area that covers this section right here and I am going to therefore, I’m going to come over here and say .custom #header area opening and closing brackets and then paste that code. Okay so now you can see that background image is sitting in there but it’s being covered up by this white so what we’re going to do then is take this again because that white color comes from the .page. And so then we’ll say background color none. Oh it’s not none, it’s transparent. There we go.
So now we have that color stretching all the way across. It doesn’t really matter you know, how wide this is because it just spans that whole distance. And also, it’s 200 pixels tall and but we aren’t actually using that full thing. So if we said height: 200 px; now we’ve expanded the size of our header area and we’ve stretched it out. If this was 500 px then you would see it stretches out even further.
And if we get rid of the height and just let the height be what the height is… actually, let’s do that. But instead of custom header area, let’s call it body .custom. And now you can see that…oh isn’t that interesting. It starts repeating itself again. Oh because body .custom ended here. So if we gave body .custom a maximum height of say you know, whatever this is… what is this? 715 so if we just said minimum height… min height: 1200 px; That would stretch that color all the way down and you can just have a fairly simple gradient definition and end up with a gradient that goes all the way through here.
Okay but what I really want to do is go back to this .custom .header area #header area. Oh right, I’ve got this minimum height. Let’s get rid of that minimum height. And you know, you can do a couple of things with borders too.
So for example, if you wanted thi sot have a sense of having a little bit of a shadow, what you could do then is to first, grab this color and I think I would… let’s see, let’s just grab it from Colorzilla. Let’s grab that color, copy.
And so what we’ll say here is border bottom: and then solid 1 px and then that color. So you can see it’s now very lightly placed this color here. And then what we do is we go to… then we’re going to create a little shadow effect at the other side of that so .custom content area which is the next area below and we’ll say border top: solid 1px #efefef; And maybe we need to make that 2 and yeah, 2 is a good idea. Now you can see this really light grey line. All we want to do is get rid of this here so if we said .custom #header border none, okay that got rid of that funny little line. So now what we have is a you know, we have our graduated color coming down to a darker line which sort of suggests a little bit of a ripple and then a lighter grey line which suggests a shadow. And you know, you could make it 3 pixels instead of that to make it seem like it’s standing out more but this is a way where you can start to get a little bit of… where you can get some style out of these things without having to use a significant background image.
And in fact, yeah well, that I guess, that’s the point I wanted to make was that you can use this gradient system for styling just about anything including headers and footers and that kind of stuff.