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.
We will finish up with CSS gradients by creating a radial gradient to accent our homepage. Radial gradients can be tricky, especially when trying to make the WebKit and Mozilla gradients match. Let's take a closer look at the syntax as we build our gradient. Of course, before I do that, let me give you an idea of what we're going to be doing. We're going to place a radial gradient sort of just behind this tag and it's going to go from white to white. The only difference is it's going to sort of fade out. So it's going to give-- I don't want to say lens flare. That's not the effect I am going for here, but it's just going to give a highlight value here that's going to sort of fade out and maybe focus your attention a little bit more on that particular tag. All right! Let's give that a try.
So I'm going to switch back into my code editor, which in this for me is Dreamweaver, and I'm going to switch back over to main.css. Now, I have the index.htm file opened and we need the main.css file opened as well. You can find the index file in the 03_05 folder. You can find the main.css in the CSS folder. I'm going to scroll down to about line 140 or so or thereabouts. So I need to find the homepage mainContent selector because this is where the gradients are going to go. So the mainContent is the div tag that surrounds that larger background image, and that's where we want the gradient.
So as before, I'm going to start out with the WebKit gradient. Now we haven't done radial gradients or discussed their syntax. So as we're creating this rule, we're going to discuss what the syntax means and show you how it differs from the linear gradients. So again, I am just going to do a background here and this time I'm not going to provide it a fallback because if I view this in Internet Explorer or some type of browser like Opera that doesn't support these gradients, I really don't want anything shown. I only want this to show up if the browser supports it. So we'll do webkit and I'm going to type in gradient.
Now remember with WebKit gradients, we pass the type of gradient that we want in as the first argument. So after opening up my parentheses, I am just going to type in radial. So it lets WebKit know that I want a radial gradient. Now, things change a little bit as opposed to doing a linear gradient, because I've got another value that I need to pass. So I'm going to type in 500 80. Now, what is that? Well, this is an offset value that is essentially defining where the radial gradient is going to go. Now, I want you to imagine this gradient being two circles, the inside circle being one color, the outside circle being another color, and then blended together.
So what this first value is, is the center of that smaller circle. That sort of inner circle if you will. That's the center point. The mainContent, if you could grid up the mainContent, that's basically saying, go 500 pixels over to the right, go 80 pixels down. That's where this gradient is going to start. So you are going to have to do a little bit of work before you start defining these to determine where you want them to start. Okay, now I'm going to do another comma after that and then I'm going to type in 50. Now what is 50? 50 is the size of that inner circle. That's the radius.
So essentially I am basically saying that inner circle of color needs to be this size and it's about 50 pixels. Okay. Now, that's the inner circle. Now, we have to worry about the outer circle. So, I'm going to do another comm, and I'm going to type in 500 80. So that's putting the center point for these two circles in the exact same location. What's really cool is that you can offset them and this can create sort of 3D effects, like a ball or some type of a reflection in the water. So you can just do some really cool things with this. So essentially, that is the other center point for the larger circle.
Now, after that, I have to type in a comma and then I have to give a radius for that larger circle. Larger circle is indeed going to be bigger and it will be 250. So 250 pixels. Notice that we don't need to explicitly say px. So essentially what we've done so far is say, hey! We want a Radial gradient. This is the center of the smaller circle, the size of the smaller circle. This is the center of the larger circle. Notice they are exactly same. This is the size of it. So it's going to go from 50 pixels to 250 pixels and then it'll just sort of blend and blur in between that. Okay. So that worked out pretty well. Now what? Well now, we do exactly what we did in our last gradient. We give color stops.
I want to show you an alternate syntax for doing color stops. Before in last one we were doing color stops as these comma separated lists, but you can also use keywords for these. So I'm going to type in from. So from just basically says go from this color and right after that we'll do to. So we're going to say from, and in parentheses rgba, open up a parenthesis there for our color stop. 255, 255, so white basically. Since we're doing rgba, we're going to do our inner color as 0.85. So 85% white.
Again, remember to close the parentheses for the color value and then close the parentheses for color stop. Do another comma and then do to. So we're doing from and then to. So to will be rgba, and again the value here is going to be the same. 255, 255, 255. The difference will be in the opacity. This is going to go to 0. So it's going to go down to nothing. So essentially, it's going to be 85% of white in the middle and it's just going to fade out to nothing as it gets towards the end. Remember I close the color value, close the color stop, and then close the gradient definition itself.
Now, I'm going to go ahead and save that and I'm going to test this in a WebKit-based browser such as Chrome. There we go. Now, we can see our gradient up top. It's just sort of the glow that we're getting underneath the Find Your Tour. Now again, if I view this in any other browser, even Firefox at the moment, I get nothing there and the reason I get nothing there is because we don't have a Firefox radial gradient defined. So let's go ahead and do that. So I am going to go down to the next line, type in background, and here again I can use moz, and remember with Mozilla you pass the type of gradient that you want using the prefix.
So here I'm going to say radial-gradient. So as before we did Mozilla linear gradient, now we're doing Mozilla radial gradient. So now you're going to see a lot of similarities here. The first thing we're going to pass in is 500px 80px. Now, I know you know what that is. That's the center of our radial gradient. The next thing I need is a degree. I'm going to type-in 0 degrees. Degree is an angle which this gradient can follow. If it doesn't follow degree, it's just going to go in a straight line and that's what I want this one to do.
But you can send it off at an angle if you'd like. Next, we have a comma and then we're going to type in circle cover. Now, what's all that about? Well, those are two keywords and they are necessary for radial gradients. Circle essentially describes the shape. You have two choices there. Circle or ellipse. Circle will be a perfect circle and Ellipse allows the gradient to go off on an angle in sort of an oblong pattern. Then we have Cover. Now this is the one that has multiple choices here. We have cover, closest side, closest corner, farthest side, farthest corner, and contain.
Let's talk about what those are. For closest side, the gradient's shape is going to meet the size of the box closest to its center. So this is essentially how it's going to cover the ground of the shape that it's inside. So the gradient shape is going to meet the side of the box closest to its center point, or it's going to meet both the vertical and horizontal sides closest to the center if it's an ellipse. Closest corner says the gradient shape is sized so that it exactly meets the closest corner of the box from its center. Farthest side is very similar to closest side except for the shape is sized to meet the side of the box farthest from its center.
So essentially it's just going to go in the opposite direction, all the way to the farther side. Same thing for farthest corner. It's just going to go to the farthest corner. So essentially, as your gradient is expanding, it has to figure out how far it wants to go. It can go to the closest side, closest corner, farthest side, farthest corner. You can also do contain. Contain is the same thing as closest side. It's pretty much the exact same thing. Cover, which is the one we're using, is basically the same thing as farthest corner. So essentially what it's going to do is it's going to cover more of the shape. Cover basically says I want you to occupy as much space as you can.
Closest corner is going to say keep it in the corner that's closest to. Keep it there. Don't let it expand past that. Once it touches the closet corner, stop the gradient. So that's essentially determining how far that gradient is going to go. So now we need our color stops and after these two keywords I'm going to type-in rgba and we're going to do exactly the same thing. 255, 255, 255 and then 1 for 100% and 0% for the start. When I was testing these gradients, 85% didn't work and if you're wondering why, it has everything to do with the fact that in WebKit we can specify the exact size, the radius of both of those inner circles.
We can't do that in Mozilla's. Mozialla's basically just determine the area we want to cover. So it's a little bit more diffused than the WebKit gradient. So in order to make it appear the same, we're basically going to make it a little stronger. So after that, I'm going to type in a comma, rgb. So this is my next color stop, rgba. 255, 255, 255. So we need white and then another comma, and here we're going to type in 0. So it is still going to go down the transparency, just absolutely nothing. Then that color stop is going to appear at 20%.
Imagine a gradient filling up that entire mainContent because we use cover as our keyword. It's going to cover the entire main region. Obviously, if it was going at 100% white, and it covered the entire region to a transparency, we would have a lot more gradient. So by saying 20%, I am essentially just ending it right there in that middle spot. I am just basically saying okay, only go for about 20% of the size of the total gradient and then stop. Okay. So how did I know to go to 20% to get an exact match with the WebKit gradient? I didn't. I experimented and that's I assume what you guys are going to have to do as well as you're trying to get these things to match up.
So I'm going to close that parentheses, semicolon, save this, and let's go ahead and test that in Firefox. Cool! Now, I want to compare these two side by side. So I'm going to go ahead and open this back up in say Chrome and just kind of put those guys right next to each other. So there's Firefox and there's Chrome. You can see they're extremely similar. The Firefox one looks like it's maybe a little stronger, but if you've got two different people visiting them in two different browsers, they will never know. They will get the exact same effect you were looking for.
So you do have to use a little bit of trial and error. But once you understand the syntax, it's a little easier to tweak one versus the other to try to figure out what you want. So there you go! Our radial gradient is now finished. Now, as I have mentioned, the syntax for radial gradients can be a little tricky. You do have to sort of work your way around about which each one of these guys is doing. You do them a couple of times, you'll get used to it, you'll get a good feel for it. I don't think you'll have any trouble. The biggest challenge is in making sure that the WebKit and the Mozilla gradients look and behave in a similar fashion. That can be a little tricky.
That and of course all the work that we were talking about in the previous movies about providing fallback content for radial gradients when you are wanting to use them, because you do have to remember that Internet Explorer and Opera for the time being don't support these. Other than that though, have fun with linear and radial gradients. They can really add a lot of pop to your designs.
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.