Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
In the previous movie we explored the syntax necessary to create gradients in Gecko and WebKit-based browsers. Let's take that a step forward as we add some linear gradients to our Explore California site. I am just going to preview this in a browser so you can kind of see what's going on, on the page right now. I've got two gradients that are sort of being faked here that I want to actually create through the use of CSS3. One is a very, very subtle gradient here behind the tagline text or the main info text, and the other is the page background itself.
You will notice if I scroll down, it goes from sort of a blue to a sand color throughout the length of page. Those are both being created right now through the use of an image. The background is the really tall background image that's being repeated and tiled over the length of the background, whereas this particular box gradient is created as part of the background image. So we're going to replace both of those with CSS3 gradients. So here I have the index.htm file opened up and you also need to open up the main.CSS.
So, the first thing I am going to do is go ahead and do the page background. So I am going to switch over to my main.css and I need to find the body tag selector, which is just a little bit further down the page here at line 57 or so. You see right here it's got a background declaration using the image. So what I am going to do now is add another background to this. So I am going to type in background. Now the reason we are doing this instead of just replacing the existing background, it's sort of giving ourselves a little bit of fallback content here.
Essentially, if the WebKit gradient that we are about to create is not understood by our browser, it will simply apply this background and not the last one. So let's go ahead and do a WebKit gradient first. So remember with WebKit we have to use the webkit vendor prefix and then we use gradient, so it's -webkit-gradient. Now with -webkit-gradient we open up parentheses and we have to pass in several things. The first we have to pass in is what type of gradient do we want. We want a linear gradient, so type in linear. Then we have to give it a start and an end point.
So here we are going to say left top. So that will start the gradient at the top left-hand corner and then comma, we have to pass the endpoint. This is going to end at the left bottom. So basically we are just saying go all the way down from the very top to the very bottom. It doesn't really matter if we do use left, center, right there. Inless you're going from left to right which would be the angle, it really doesn't matter. This is just going to do it in a straight line for us. Now the next thing we need to do is pass in the color stops. So after another comma I am going to type in color-stop and then open up a parenthesis.
Now remember color stops are essentially just saying, where should this be positioned on the gradient and what color should it be? So I am going to position this at 0.25. So I am essentially going to start the gradient 25% down the length of it. So that will give me a nice solid color at the very top of it. The actual gradient won't start until about 25% down the side of the page in this case. So after that I am going to pass in a color. So I am going to do comma and I will just do an RGB color decoration here, 60, 107, 146.
Now it can get kind of confusing here. So I am going to close to RGB declarations parentheses and then close the color stops parentheses. I've got both of those to close. So that takes care of the top color. Now we need to take care of bottom colors. So I am going to do another comma, and here we'll do a color stop. Again, we are going to do a very similar thing. This one is going to be 0.65. So the bottom color of the gradient will sort of become solid about 65% down the page. So really limiting our gradient to occupy the position at 25% going down to 65%.
That's going to give us solid colors on the top and solid colors on the bottom and not an even blend all the way through. That's really what we want for this. So again here I have to pass in a color value. So again I am going to go RGB and hex values would work here, keywords would work, HSL would work, any of these. So 226 is the first red value, 217, so obviously this is much brighter, and 185. Now here again it gets really confusing. I have to close the parentheses for the RGB declaration. I have to close the color stops parentheses and then I've got close my gradients parentheses.
So I actually have three closing parentheses here at the end. It's really easy to forget one of those. So there is our WebKit syntax. I am going to save the file and then I am going to go down on the next line and do our Mozilla gradient. So again I am going to do another background declaration. So I am just doing separate background declarations for all these. Essentially, browsers will find the last one they can apply and apply it. So here I am going to type in -moz for Mozilla, -linear-gradient, and that's -gradient.
So here is a big difference between WebKit and Firefox. Firefox uses the Mozilla linear gradient. So again I am identifying what type of gradient I want by using the vendor prefix. All right, if I open up parentheses now I get to pass in where I want to my gradient to start and in this case I want it to start center top. So I'm starting the gradient at the very center and top of the page and this is going to run straight down the page. Now after that I pass in color stops where do I want these, how many colors do I want, where do I won't these colors, so I have to position them.
So very similar in that respect to the WebKit gradient. So here I am going to type in rgb, and I will put up parentheses again. This is just going to be the just same color declarations, so you can feel free to copy and paste these if you want. 60, 107, 146. I don't like using white space in there. It doesn't matter. It's just for me to save a little bit of space. Now after that we have to give it a percentage and remember for the WebKit, when we use 0.25 just to be different. Mozilla uses the actual percentages. So I am going to say 25%.
Your color stops are just a comma-separated list at this point in the Mozilla gradient. So I can just add as many of these as I want. I really only need one more. So this is RGB. Again, we remember the values are 226, 217, 185. Close that and we will do 65% there. So again we are just being very explicit. Close our parentheses and then type in a semicolon. Okay, cool! So I am going to save this and I am just going to go ahead and preview this in Chrome to start off with, a WebKit-based browser. Cool! Now I'm seeing my WebKit gradient and notice again we are not starting until about 25% down the page and then we're ending about at 65% down the page.
So it gives us nice solid colors above and below. I am going to test the same one in Firefox to make sure that gradient is working in both browsers. I'm indeed getting it working in both browsers. Perfect! Cool! So that's working great. Now the next thing I need to worry about is that sort of info box. Again, just to bring it up in a browser, it's this box right here. I want to replace that through the use of a gradient background. Number one, it's easier and better, because I don't have to worry about whether my text is aligned properly with that. You can see without the use of the web font that we will be using later the text is actually higher than it needs to be.
So if I could somehow make the background of the div tag that this text is sitting in this gradient, then I don't really have to worry too much about pixel perfect precision. I can just say hey, position yourself somewhere in that region and I'll still get the same effect I am looking for. It's also going to allow me a little bit later on to round the corners of this box and do things like that. So what I am going to do is have it not even really butt up against the edge so that later on we can take these edges and do some sort of fun things with them that are independent of that outline. So the first thing I am going to do is go back into my code and I need to find the wrapper selector, which is down just a little bit, and the homepage wrapper specific selector, which is about on line 136.
So down just a little bit there and you can see right now it's using the main_back.jpg. I am going to change that that to main_back_nobox. So I have created two versions of that background image. If I test this in Firefox you can see that now it's just the image behind it. It doesn't have that sort of fake gradient sitting on top of it. So now we have to go find the syntax for the div tag that surrounds all that text so that we can give it a gradient background.
I can find that at around line 608. You'll find a rule that's been commented out. I'm going to go ahead and uncomment that rule and this is the div tag that surrounds all that text. You can see now we are inserting some padding into it, we are giving it a width, we are rounding the corners of it, and this certainly could be done a little bit more efficiently than this. When we talk about round border radiuses later on, we will talk about how maybe that code could be made a little more efficient. So what we are going to do now is just add the background to it. So at the very bottom of the selector I am going to come in and just type in background.
First thing I am going to do is a solid color. Again, again this is fallback content for browsers that don't quite support a gradient, so e1d8b9. So that's sort of that light khaki color. We will go with our WebKit gradient first. backgrounds:-webkit-gradient. Now if you're wondering, does it matter, do you have to use a webkit one first? No, it's just the way that I'm doing in this particular exercise. Now again this is going to be a linear gradient.
This is going to positioned starting from the left top to the left bottom. So I am being very consistent there. Then our first color stop. I am going to go ahead and place that in. Now if you remember from looking at the previous example, that was sort of a semi-translucent gradient. It sort of went from a color that was really, really similar to a color that was just a slight bit darker. So this whole thing is going to be a gradient. Instead of worrying about an offset point, I am actually going to start it at the very top. So we will use 0 and then instead of a solid color value, I am going to pass rgba.
So you can involve transparencies in gradients if you would like. This color is going to be 233, 229, 212, and then the alpha value that I am going to pass to this is 0.85, so a little darker at the top. I need to close that and then remember I need to close the parentheses for the color stops. So don't forget both of those closed parentheses. After that we are going to do our last color stops. So color-stop and then I open my parentheses and it's going to end at 1.
So rather than it being 100%, remember to represent 100% we use a 1 in WebKit. So then rgba, so rgba again and inside the second one it's going to be 191, 178, 147. It's a little darker color, 0.95. So not as transparent as before. Remember you closed your rgba value first, then the color stop, then the gradient itself. So, three closed parentheses there at the end.
Finally, let's do our Mozilla background. So we are going to do background here. If I can type. There we go and then -moz-linear- gradient and now you're getting a taste of why I sometimes copy and paste code for students, because it is not fun watching me type. If I didn't feel like we really needed to go over everything the syntax was doing, I would probably copy and paste again. So again here we are going to do center top. So we are going from the very center top of this.
Notice that in the Mozilla gradients if you don't specify where it ends, basically you end it with a color stop. The gradient is understood to run through the entire element. Then we are going to do rgba, same values, so 233, 229, 212 and 0.85 for the alpha value. I am going to close that color value and remember we need to set a position for this color stop and it's going to be 0%, so same as the WebKit starting right at the top.
Finally, the last color stop rgba, 191, 178, 147, 0.95. So, we are using the exact same values that we used before. That one is going to be positioned at 100%, which means at the very end of the element. So we are going to close that. We will save that and let's go ahead and test this. Again, this one we will test in Firefox first. Cool! There is our solid color background.
That's where we sort of rounded some the corners on it. We have been able to be a little more decorative. You've got some semi-transparency going on in there in the background and the gradient is extremely subtle. It just gets a little darker down there in the bottom. Let's go ahead and test that in a WebKit-based browser. So I will open this up in Safari and we see we are getting the exact same gradient. So you can make those gradients match up. It's just somewhat difficult sometimes. Well, what about a browser that doesn't support gradients? So I'm going to preview this in Internet Explorer and you can see in Internet Explorer we are indeed getting the background graphics still working.
Here we are just getting a solid color. So it's not as nice, but it still looks pretty decent and it doesn't look like it really is terribly out of place. Now keep in mind that providing this type of fallback content for gradients can be kind of tricky. We are using some really base level stuff here. You can simulate gradients in Internet Explorer by using Microsoft's proprietary filters. Remember we saw those a little earlier in the title. However, I don't recommend using them, unless you're passing them into Internet Explorer through the use of conditional comments and maybe even through their own style sheets. In our next movie, we are going to finish our look at gradients by creating a radial gradient that will accent our homepage.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.