The Color and RGBA

I found the color I wanted, uh, made it a little bit transparent and I looked at the rgba colors or the rgb colors and then I used an alpha for the alpha channel at 90 percent. So you can see here that 242 is the first number, which is red, g is green, this is the numeric value in the green scale, and then b is 90, 90 in the blue spectrum of the color, and then this last value is the alpha channel, also known as how much opacity you want that color to have. So that's why I use rgba.

Now, let's go down and we're going to simply say position fix now when you position fix something, you fix it in place wherever you place it based on your top value that you set so we're gonna say position fixed and top will be zero right at the very top and the height of the sticky header is gonna be 180 pixels. Remember we talked about that just a moment ago. Now the width of this needs to be 100 pixels because, or sorry, 100 the reason why it needs to be 100 wide is because when you position fix something, uh, it actually doesn't know how wide it needs to be so if you look in the browser here it's actually all jumbled over to the left. So we'll fix that by simply saying width 100 percent now.

If I say that it's perfectly the right width and you can even see a little bit of the background there, and it is fixed to the top, so it is sticking there but um it's behind everything. So we want it to be in front of everything and we will solve that with some z-index uh we're going to change that to 99, that should bring it up in front of anything that's on the page.

Let's finish it off with just a little detail box shadow zero zero ten pixels rgba let's go for zero zero zero and 0.2 save that and that should give it a nice look. The problem here is uh the text so everything's stuck to the top, and we're getting on the right track here but the text doesn't fit within the fixed height and that's a problem so all we got to do is restyle that. So let's go down below sticky header and we're going to simply style sticky header h1 let's start there and we're going to change the font size to 2.8 rem then the line height to 3.2 ram margin 0 auto.

Let's save that and see what that looks like, looking much better it's fitting within there now all I want to do is change the size of the small text so this is the h1 and then this is two small tags within the h1 I want it to be a smaller font size so that will simply be sticky header h1 small and then font size to ram something a little bit smaller.

Sticky Header Student Version Scroll Down

Our sticky header is looking good you can see that 200 pixels right here is the distance, the margin top of the of the content the body so that it gives some space so you have the 20 pixel gap here to make it look like margin from the sticky header and there is your sticky header uh I love sticky headers I use them in my websites in fact I think right now in my blog I have a sticky header when you scroll down it's just a nice way to keep the navigation at the very top, your brand sticks to the top and your navigation sticks to the top.

One little tip or maybe challenge for you if you want to take this a little step further is use if you are familiar with javascript or jquery simply when you have a scroll event when you scroll down beyond a certain amount of pixels let's say 200 pixels the distance of this gap this whole header shrinks even more in size so that there is more space to read what's on the screen. So maybe you want to shrink it to half the height, let's say 100 pixels or 90 pixels if you want to go exactly half you need to shrink everything, the font size maybe remove the small tags and just have sticky header so that you could fit everything and then when you scroll back up you can have that you know visible again feel free to try that if you want I'm not going to cover it in this because that's specifically a javascript or a jquery challenge but it's something that I do in my sites, I love doing sticky headers but when you scroll down if you have a big header it covers a lot of the screen so you might want to change that height. The alternative is just to make a smaller sticky header that's always stuck to the top.

Now that's it for Day 14, the Sticky Header, I hope you enjoyed that lesson see you tomorrow in Day 15 for more CSS fun

"WEBVTTKind: captionsLanguage: enhello everybody welcome back to css3 in 30 days today is day number 14 almost halfway through all of the days today we are going to be continuing in a way from where we left off yesterday in day 13 which was a sticky footer so today we're going to be creating a sticky header let's do it so here is the info page again like day 13 we have an info page a student page and a final page so let me show you what that looks like the info page here gives you some instructions it says let's make a css sticky header there are three html files for this lesson index student and final.html i'll show you that in a moment you can click this button to view the student version you can click here to view the final version so let's check out the final version here it is you can see up here the header is neatly tucked at the top it's got a little bit of a border uh or a gradient maybe both in fact and then when i scroll it sticks to the top and it's slightly transparent so you can actually see what's behind the header so it doesn't actually take up too much of the the screen estate so to speak in your viewport so when you scroll it should stick to the very top when you go back up everything is good now if i go back to the student version right here you can see just the normal header we're going to turn that into a sticky header it doesn't actually do anything here so that's your job slash my job to turn that into a sticky header so why don't we jump over into our code editor and let's check out the files we have the 14 sticky header folder with five individual files go ahead and download that folder open it up in your favorite code editor i suggest atom or brackets both are free and uh some of my veteran students may wonder why i'm not using coda too i do love coda too in fact i still use it but for these types of projects i like playing around with new software to show my students that hey you don't have to shell out a hundred bucks for a decent software uh code editor so adam is my poison of choice today and i am going to be opening up my files here so we got index.html it's very straightforward this is just the info page so you don't even really need to concern yourself with that the final.html looks a little bit like this we have a body with the class of sticky header lesson that is important because we're actually going to be selecting that class you could just select the body but specifically i want to select the class we have a div with the class of sticky header so this is the header in fact you might even want to change this to header the header tag to make it more html5 semantic feel free to do that if you wish and in there we just have some text and then after that it's just some basic content i specifically put a lot of lorem ipsum in here in paragraph tag so that the page can be long enough to scroll it's the only reason i did that and everything else down here is just uh nothing that you need to concern yourself with student.html is the same markup we've got sticky header lesson and sticky header so we're going to modify that in our sandbox.css if at any point you want to refer to the final code final.css is there for you right here you can always go there and check it out now let's get started sandbox.css let's start with the very very top we're going to select body with the class of sticky heady sticky header lesson you could also just say sticky header lesson that would do just fine it would suffice the the margin top will be the same height as the height of the sticky header itself plus some space so i like to give let's say the sticky header is going to be 180 pixels tall we want it to be 180 pixels tall plus some so maybe 20 extra pixels let's call it 200 pixels margin top 200 pixels good enough let's go ahead and style the sticky header now we're going to do is select the background we're going to say rgba and we're going to change that color to uh 242 comma 57 comma 90 comma 0.9 if you're wondering where i got that i got it from photoshop i was designing this in photoshop found the color i wanted uh made it a little bit transparent and i looked at the rgba colors or the rgb colors and then i used a for the alpha the alpha channel at 90 percent so you can see here 242 is the first that's red g is green this is the the numeric value in the g in the green scale and then b is 90 90 in the in the b uh spectrum of the color and then this last value is the alpha channel also known as how much opacity you want that color to have so that's why i use rgba and now let's go down and we're going to simply say position fix now when you position fix something you fix it in place wherever you place it based on your your top value that you that you set so we're gonna say position fixed and top will be zero right at the very top and the height of the sticky header is gonna be 180 pixels remember we talked about that just a moment ago now the width of this needs to be 100 pixels because or sorry 100 the reason why it needs to be 100 wide is because when you position fix something uh it actually doesn't know how wide it needs to be so if you look in the browser here it's actually all jumbled over to the left so we'll fix that by simply saying width 100 percent now if i say that it's perfectly the right width and you can even see a little bit of the background there and it is fixed to the top so it is sticking there but um it's behind everything so we want it to be in front of everything and we will solve that with some z index uh we're going to change that to 99 that should bring it up in front of anything that's on the page and let's finish it off with just a little detail box shadow zero zero 10 pixels rgba let's go for zero zero zero and 0.2 save that and that should give it a nice look the problem here is uh the text so everything's stuck to the top and we're getting on the right track here but the the text doesn't fit within the fixed height and that's a problem so all we got to do is restyle that so let's go down below sticky header and we're going to simply style sticky header h1 let's start there and we're going to change the font size to 2.8 rem then the line height to 3.2 ram margin 0 auto let's save that and see what that looks like looking much better it's fitting within there now all i want to do is change the size of the small text so this is the h1 and then this is two small tags within the h1 i want it to be a smaller font size so that will simply be sticky header h1 small and then font size to ram something a little bit smaller and that when i refresh should solve the problem day 14 sticky header student version scroll down our sticky header is looking good you can see that that 200 pixels right here is the distance the margin top of the of the content the body so that it gives some space so you have the 20 pixel gap here to make it look like margin from the sticky header and there is your sticky header uh i love sticky headers i use them in my websites in fact i think right now in my blog i have a sticky header when you scroll down it's just a nice way to keep the navigation at the very top your brand sticks to the top and your navigation sticks to the top one little tip or maybe challenge for you if you want to take this a little step further is use if you are familiar with javascript or jquery simply when you have a scroll event when you scroll down beyond a certain amount of pixels let's say 200 pixels the distance of this gap this whole header shrinks even more in size so that there is more space to read what's on the screen so maybe you want to shrink it to half the height let's say 100 pixels or 90 pixels if you want to go exactly half you need to shrink everything the font size maybe remove the small tags and just have sticky header so that you could fit everything and then when you scroll back up you can have that you know visible again feel free to try that if you want i'm not going to cover it in this because that's specifically a javascript or a jquery challenge but it's something that i do in my sites i love doing sticky headers but when you scroll down if you have a big header it covers a lot of the screen so you might want to change that height the alternative is just to make a smaller sticky header that's always stuck to the top now that's it for day 14 the sticky header i hope you enjoyed that lesson see you tomorrow in day 15 for more css funhello everybody welcome back to css3 in 30 days today is day number 14 almost halfway through all of the days today we are going to be continuing in a way from where we left off yesterday in day 13 which was a sticky footer so today we're going to be creating a sticky header let's do it so here is the info page again like day 13 we have an info page a student page and a final page so let me show you what that looks like the info page here gives you some instructions it says let's make a css sticky header there are three html files for this lesson index student and final.html i'll show you that in a moment you can click this button to view the student version you can click here to view the final version so let's check out the final version here it is you can see up here the header is neatly tucked at the top it's got a little bit of a border uh or a gradient maybe both in fact and then when i scroll it sticks to the top and it's slightly transparent so you can actually see what's behind the header so it doesn't actually take up too much of the the screen estate so to speak in your viewport so when you scroll it should stick to the very top when you go back up everything is good now if i go back to the student version right here you can see just the normal header we're going to turn that into a sticky header it doesn't actually do anything here so that's your job slash my job to turn that into a sticky header so why don't we jump over into our code editor and let's check out the files we have the 14 sticky header folder with five individual files go ahead and download that folder open it up in your favorite code editor i suggest atom or brackets both are free and uh some of my veteran students may wonder why i'm not using coda too i do love coda too in fact i still use it but for these types of projects i like playing around with new software to show my students that hey you don't have to shell out a hundred bucks for a decent software uh code editor so adam is my poison of choice today and i am going to be opening up my files here so we got index.html it's very straightforward this is just the info page so you don't even really need to concern yourself with that the final.html looks a little bit like this we have a body with the class of sticky header lesson that is important because we're actually going to be selecting that class you could just select the body but specifically i want to select the class we have a div with the class of sticky header so this is the header in fact you might even want to change this to header the header tag to make it more html5 semantic feel free to do that if you wish and in there we just have some text and then after that it's just some basic content i specifically put a lot of lorem ipsum in here in paragraph tag so that the page can be long enough to scroll it's the only reason i did that and everything else down here is just uh nothing that you need to concern yourself with student.html is the same markup we've got sticky header lesson and sticky header so we're going to modify that in our sandbox.css if at any point you want to refer to the final code final.css is there for you right here you can always go there and check it out now let's get started sandbox.css let's start with the very very top we're going to select body with the class of sticky heady sticky header lesson you could also just say sticky header lesson that would do just fine it would suffice the the margin top will be the same height as the height of the sticky header itself plus some space so i like to give let's say the sticky header is going to be 180 pixels tall we want it to be 180 pixels tall plus some so maybe 20 extra pixels let's call it 200 pixels margin top 200 pixels good enough let's go ahead and style the sticky header now we're going to do is select the background we're going to say rgba and we're going to change that color to uh 242 comma 57 comma 90 comma 0.9 if you're wondering where i got that i got it from photoshop i was designing this in photoshop found the color i wanted uh made it a little bit transparent and i looked at the rgba colors or the rgb colors and then i used a for the alpha the alpha channel at 90 percent so you can see here 242 is the first that's red g is green this is the the numeric value in the g in the green scale and then b is 90 90 in the in the b uh spectrum of the color and then this last value is the alpha channel also known as how much opacity you want that color to have so that's why i use rgba and now let's go down and we're going to simply say position fix now when you position fix something you fix it in place wherever you place it based on your your top value that you that you set so we're gonna say position fixed and top will be zero right at the very top and the height of the sticky header is gonna be 180 pixels remember we talked about that just a moment ago now the width of this needs to be 100 pixels because or sorry 100 the reason why it needs to be 100 wide is because when you position fix something uh it actually doesn't know how wide it needs to be so if you look in the browser here it's actually all jumbled over to the left so we'll fix that by simply saying width 100 percent now if i say that it's perfectly the right width and you can even see a little bit of the background there and it is fixed to the top so it is sticking there but um it's behind everything so we want it to be in front of everything and we will solve that with some z index uh we're going to change that to 99 that should bring it up in front of anything that's on the page and let's finish it off with just a little detail box shadow zero zero 10 pixels rgba let's go for zero zero zero and 0.2 save that and that should give it a nice look the problem here is uh the text so everything's stuck to the top and we're getting on the right track here but the the text doesn't fit within the fixed height and that's a problem so all we got to do is restyle that so let's go down below sticky header and we're going to simply style sticky header h1 let's start there and we're going to change the font size to 2.8 rem then the line height to 3.2 ram margin 0 auto let's save that and see what that looks like looking much better it's fitting within there now all i want to do is change the size of the small text so this is the h1 and then this is two small tags within the h1 i want it to be a smaller font size so that will simply be sticky header h1 small and then font size to ram something a little bit smaller and that when i refresh should solve the problem day 14 sticky header student version scroll down our sticky header is looking good you can see that that 200 pixels right here is the distance the margin top of the of the content the body so that it gives some space so you have the 20 pixel gap here to make it look like margin from the sticky header and there is your sticky header uh i love sticky headers i use them in my websites in fact i think right now in my blog i have a sticky header when you scroll down it's just a nice way to keep the navigation at the very top your brand sticks to the top and your navigation sticks to the top one little tip or maybe challenge for you if you want to take this a little step further is use if you are familiar with javascript or jquery simply when you have a scroll event when you scroll down beyond a certain amount of pixels let's say 200 pixels the distance of this gap this whole header shrinks even more in size so that there is more space to read what's on the screen so maybe you want to shrink it to half the height let's say 100 pixels or 90 pixels if you want to go exactly half you need to shrink everything the font size maybe remove the small tags and just have sticky header so that you could fit everything and then when you scroll back up you can have that you know visible again feel free to try that if you want i'm not going to cover it in this because that's specifically a javascript or a jquery challenge but it's something that i do in my sites i love doing sticky headers but when you scroll down if you have a big header it covers a lot of the screen so you might want to change that height the alternative is just to make a smaller sticky header that's always stuck to the top now that's it for day 14 the sticky header i hope you enjoyed that lesson see you tomorrow in day 15 for more css fun\n"