Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the more exciting developments in CSS recently has been the addition of CSS Gradients as a way of defining backgrounds. In many ways this feature is still sort of experimental, but support for gradients is increasing rapidly and the syntax is beginning to become a little bit more stable, so I want to take a brief moment to introduce you to CSS Gradients. I'm going to do that by using the gradients.htm file, which you can find in the 06_08 directory. Now this is actually a file that picks up right where we left off in the last lesson.
So if I were to preview this in my browser you can see it's got all the shadows that we just added to the page, and what better to add the shadows than a gradient. So I'm going to come right back into my code and we're interested in adding a gradient to this wrapper, so that background is behind everything else. I am going to scroll up and find the wrapper class selector, which is right here on line 25 and I am going to get rid of the existing background declaration, and I am just going to start adding some background declarations directly at the bottom of this, just so everything is sort of grouped together here.
So the first thing I am going to do is I am just going to do a default background. This is really good practice, because in case a browser doesn't recognize a syntax that you are going to pass into it. in just a moment it will use this background instead. So I am going to type in #f7f0b7, which is sort of a light tan color if you will, and again, remember the Cascade, so I am going to follow this with the syntax for gradient. So if a browser comes through here, it will apply this background first or at least try to, and then it will move on to the next one. If it doesn't understand the one that comes after it, it will just sort of ignore it and it will use this one instead.
So that's one way to provide a fallback for older or non supporting browsers. All right, so directly after that, I am going to type in (background:) So CSS Gradients are part of the background syntax. They have sort of been added to backgrounds for elements and I am going to practice doing a linear gradient. So I am going to type in (linear-gradient). Now we have several different types of gradients available to us, we have radial-gradients as well. They are starting to work on the syntax for diagonal gradients, but for right now let's just focus on the basic syntax of a linear-gradient.
Okay, so I am going to open up some parenthesis and here we have to pass in some values. Now the first thing I am going to do is just pass in top, and that's basically saying, hey I want to start - from the top of the element. Now I want to type in a coma and I am going to follow that up with what our first color is going to be. Now you can feel free to use any color notation you want here, you can also use RGB A and HSLA values if you want semi-transparent gradients. So that you can just do some really cool things with that. Now I am just going to use the same color value I used at the very top here. So F7 and then F0B7, so I am just going to go ahead and do that, and then I am going to do a space and then 0% okay, so let's talk about this syntax.
It's really weird because you have a mixture of comma separated values and then white space separated values. So the white space that you have here basically is saying, hey, I want to use this color and I want to start that color right here, 0% again, would be at the very top, because this gradient is going from top to bottom. Okay, after this I am going to type in a comma, and then I am going to follow this with another color which is #b57c12. I am going to do a space and 100%, then I am going to go ahead and close those parenthesis and they type in a semi-colon.
So once again going over the syntax, we are saying we want a linear-gradient, we want the gradient to go from top to bottom, we are going to use this color starting at 0%, we are going to use this color at 100%. If I save the file and I test this in my browser, I see absolutely nothing. At least I do in Mozilla. If I tested this in a WebKit browser such as Safari or Chrome, I see absolutely nothing. Okay now I mentioned before that this is still experimental.
So in a lot of ways the syntax is not going to work unless you use vendor prefixes, so what I am going to do is I am going to copy this particular property and paste it two more times and then just above this, I am going to start with the (-moz) vendor prefix add that right to (linear-gradient), and then I am going to do (-webkit-linear-gradient). Now there is a reason that I am doing in this order, I can swap Mozilla and WebKit, that doesn't really matter.
But the reason that I'm using the vendor prefix before this one is that these are considered to be experimental syntax. So it is first going to ask for the experimental syntax, once Mozilla and WebKit, both drop this experimental syntax, it will go ahead and it will just use this sort of non-prefix. So remember, the cascade applies these in the order that they are found. So if this is supported, it's the last thing that is applied and it's using sort of that standardized syntax from the specification. All right, I am going to Save this and once again I am going to go into my browsers and I will Refresh the page and cool, there is our gradient! I am going to do the same thing for Chrome, Refresh it and boom, there is our gradient, awesome! Now I need to be again honest with you about the syntax here.
I have shown you the most simple syntax that you can possibly use to do a linear-gradient. You could come around here and play with the starting values, you can move them close to each other, you can push them away from each other. There are a lot of variations that you can do with the syntax. But trying to keep up with the syntax changes and cross browser support for gradients is almost a full time job, as the syntax is going through the process of becoming standardized. That's why I want to show you a web site. So hang on for a second, let me pull my browser back up. I want to show you this ultimate CSS Gradient Generator. You can find this at colorzilla.com/gradient-editor.
This is fantastic, it allows you to mix colors together visually, it allows you to choose from presets, you can choose from vertical, horizontal, diagonal, radial-gradients, and what happens is, once you mix this together it gives you syntax for supporting older versions of Mozilla, older versions of WebKit browsers, older versions above Opera, and it actually adds support for Internet Explorer as well, including transparency support. So this is an extremely handy tool. It keeps track of all the implementation bugs and changes in syntax for you, and again, it just allows you to build these gradients directly in the browser window and then copy and paste the resulting CSS code.
I recommend that you use it not only to generate the code, but also to read through it and learn more about the CSS gradient syntax, and how it's evolving.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.