Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
The addition of gradients to CSS was a huge turning point in our ability to stylize elements through CSS. Unfortunately, the syntax is not the easiest thing in the world to master, and uneven browser support means we currently have to use a number of prefixes in older syntax as workarounds in order to get them to work cross-browser. So in this exercise we're going to explore the Gradient syntax and ways that you can make writing them a little bit easier on yourself. I have the buttons file open from 06_03.
Just underneath the box-shadow that we were creating in the last exercise, I'm going to create another background declaration, and yes, I know I have one at top, but I like putting the gradients at the bottom. So gradients are always going to be a part of your background, and I have to specify what type of gradient I want. In this case, I want a linear-gradient. The next thing I have to do is specify the direction that I want the gradient to follow. Now I open up parenthesis at this point, and for this particular gradient I want to say to bottom, so it's going to give from the top to the bottom and then a comma, and I'm going to separate the color stops.
Now color stops are basically what color the gradient should start at and how many different colors you have within that gradient. I'm going to do a really simple one here of two colors, so I'm going to do rgb(30,87,153), so it's just a regular color declaration. The next thing I need to do is I need to tell it where I want that to position itself, and I'm going to say 0%. Now because it's saying to the bottom, that's essentially saying I want this color up top. And I can add as many colors as I want using that percentage as, hey, go this far down and do this color and do a gradient between the two of them.
Well, I'm just going to do a really simple gradient that starts at the top and goes all the way to the bottom. So here I'm going to do rgb, and inside parenthesis here I'm going to do 125, 185, 232. So this is a much lighter blue color. That I'm going to do 100%, which means all the way down at the bottom. Now don't forget to close parentheses that you opened up the very beginning. When you're doing the RGB syntax it's really easy to forget that. So don't forget to close that, and then I'm going to type in a semicolon. All right, I'm going to save this, and I'm going to go ahead and test that, and indeed, there is my gradient. It's going from that darker blue at top to the lighter blue on the bottom, which is exactly what I was going for.
Now you probably saying to yourself, well, that syntax wasn't that bad, why were you making such a big deal out of that? Well, I'm making a big deal out of it because if you want gradients to work everywhere, you have to support just a mind-numbing array of prefixes and older syntax, because the gradient syntax has been updated over the past couple of years and older browsers supported the older syntax. So in order for you to really be cross- browser compliant, you have to use several different forms of syntax for that, which can be really tedious, which is why I want to introduce you to this tool.
This is the Ultimate CSS Gradient Generator. You can find this at colorzilla.com/gradient-editor. This is a fantastic tool. I cannot recommend this enough. For those of you out there that are graphic designers, and you've worked with building gradients in Illustrator and Photoshop, this tool allows you to build gradients exactly the same way. You can come in and add your color stops and move them around and get rid of color stops and change colors. This is a really powerful editing tool. And then it goes ahead and generates the syntax for you.
So you're really just going ahead and creating whatever you want and then copying and pasting that syntax, it is so cool. There is all these Presets here and some of them are really nice, they are like glass buttons and some really good looking stuff. You can see a preview of it over here. I'm just going to grab the first gradient because it's sort of the blue we need, and it's also get kind of the nice little beveled glass look to it. There are a lot of things that you can do, you can adjust the hue and saturation, you can reverse the gradient, you can also change the Orientation, the direction of it, so there is all sorts of really cool stuff that you can do here.
I'm going to go right down here to the actual syntax, and it says, okay, what color format do you want? I'm going to switch it to RGB just to say consistent with what we've done. I can go ahead and throw in Internet Explorer 9 support, I definitely want to that. I can turn that on, that's going to give me this filter syntax down there. And then the very next thing I can do, I can just hover over the code, and this nice little button come up that says Copy. And I click on that, and it says, okay, you've copied it to the clipboard. Now it's just as simple as going back into my code editor--I might get rid of the existing gradient--and then I'm going to paste. This is going to get messy, so bear with me.
Boom! That is messy. I'm going to go ahead and use a little Dreamweaver tool here to apply source formatting. It's going to clean this up a little bit. I just want to go through some of this code here. I'm really just going to go through various comments. For older browsers that don't support gradients, they are going to get a solid RGB color. For Internet Explorer 9, we need a conditional override of that filter at the bottom in order to use SVG. Then we go down, and we see syntax for Firefox 3.6, and we have syntax for Chrome and Safari 4+, then the updated for Chrome 10, syntax for Opera, syntax for Internet Explorer 10, the W3C's non-prefix syntax and then at the very, very bottom we have Internet Explorer 6 through 8, which is using their proprietary filter property to, if you will, fake a gradient.
So if I save this, go back into my browser, and refresh this page, there is our new gradient, and that looks fantastic. Now I mentioned that we also need to do a hover and a focus. And I'm going to show you how fast this gradient editor can make you. I'm going to go back to my Gradient Generator, and I'm going to still work on the same gradient, so I'm selecting this gradient, then I'm going to tell that gradient to reverse. Reversing it just switches it, which is great for a rollover. I'm just going to go right back over to the code over here.
It's using the same settings that I've used before, and I'm just going to copy that. Go back into my Editor, and then inside the hover selector that we've already got there, just going to paste it. Now at the very bottom of that, I'm going to go ahead and change color, so I'm going to add the color property rgb, and this is the color of the text obviously, 212, 212, 225. So almost white, but not quite white, save that. And then finally, I also want to an active and focus style.
So I'm going to come back in, I'm going to reverse the direction of the gradient again, but this time I'm going to make a hue/saturation adjustment, I'm going to make it darker. I'm going to grab the Lightness value here, move that all the way down to about 30 or so, and you can see it change color. Once again, I'm going to come back up, copy this, move back over, and paste that code into the focus and active selector. I'm also going to do one more little thing here which is change color there as well, and the color I'm going to give that there is just white.
So I'm going to save that, I'll clean up my code again by applying source formatting. If your code editor has that feature I recommend it because it will help tame this code little bit. That's really it. That's why I love this tool. It's so easy to use, but don't let that stop you from learning the syntax and learning how this is supposed to be constructed, because occasionally you're going to go back in there and tweak the syntax. So make sure you at least read up on how the syntax works. So after I save that, I'm going to come back into my buttons, I'm going to refresh this page. There is our hover state, very nice, and notice if I click and hold mouse down on this button, there is the active state.
Also, if I tab through it, I get the active state as well. So take this method of using buttons, kind of play around with it a little bit, create your own buttons, experiment with the formatting, and see what you can come up with. That's one of the things that I love about these new CSS3 properties, they allow your creativity to shine.
There are currently no FAQs about CSS: Styling Navigation.
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.