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.
Well, we've come to the end of another title in my CSS series. I want to thank you for watching CSS: Styling Navigation, and I hope you become inspired to look for meaningful ways that you can improve your site's navigation through CSS. Before you go, I want to leave you with a few tools and resources that I think will help you learn more about how CSS can enhance site navigation. So I'm in this additional resources.htm file, and if you have access to the exercise files, if you look in the 07_01 directory, you'll find this page. So you can just open it up and have quick access to these links.
If not, if you're just watching this, you should see an overlay show up that's going to give you a link to the page as well. Well, if you've taken any of my CSS courses, you've probably already seen this page, the CSS Current Work Page. This is one of my favorite pages, it's bookmarked, I read it all the time, but what this is is it's a quick snapshot of what's going on with all of the different CSS specifications. It tells you kind of where they are, what's been added to them, how they've changed, how far along the process of being supportive they are. So this is a fantastic place to learn more about what's currently being worked on, on CSS and really stay ahead of the game in terms of what's coming.
The next resource I want to take you to is the WebAIM's guide to link accessibility. This is WebAIM, an organization dedicated to accessibility, and if you go to their page and browser articles you're going to find this article on Links and Hypertext. And what's awesome about this article, this page has a lot of great information about how to make sure that all of your site navigation remains accessible to anybody that uses your site. This is definitely a page you want to go through and study all the different ways that you can make your links accessible. Next, I want to take you to an article in Smashing Magazine by Lee Munroe called The Definitive Guide to Styling Web Links.
The thing that I really like about this article is it gives a nice overview of a lot of the best practices around styling links. It's going to give you some examples, it's going to go over different aspects of designing site navigation, and it's going to have links to external resources. So definitely check this article out, it's got a lot of really super-useful information in it. Next, I want to take you back to the WebAIM's site and show you their Color Contrast Checker. So what's really cool about this is let's say you come up with a color scheme for your site, you can come to this page, plug in the colors, especially when you're going to have two colors that are right on top of each other like foreground or background, and you can check their contrast to make sure that people with color blindness or other vision disabilities can still tell the difference between those two items.
That's incredibly important, because if you have two colors that are too low in terms of contrast, people with certain types of colorblindness are going to have a really hard time discerning between the background and the link. So, in order to make sure that your site is usable by everybody that visits it, you want to check your color schemes against this type of a Color Contrast Checker. So this is definitely something you want to bookmark and use often. Next up, I have a tool that we just got done using up too long ago, and that would be the Ultimate CSS Gradient Generator. We used this a little bit earlier when we were creating our buttons, and I got to tell you I use this all the time.
So definitely you want to bookmark this and use it just to save yourself a lot of time when you're creating gradients and to make sure that the syntax is going to be correct. Next, I have a tool that I pointed you to in the lab but we didn't actually use, and I wanted to show you this. This is the CSS3 Generator by Randy Jensen, and I love this tool. Now what's great about this is you choose whatever property you want to be able to kind of experiment with, let's say box shadow because we were using that earlier. So now I can choose whether or not I want it to be inset, I could play around with different values like the Horizontal Length and the Vertical Length, I'll go ahead and enter a color in here so we can sort of preview this.
I'll go ahead and give it Blur Radius, let's say you do a blur radius of 10, and then we'll do a spread of say 5. And as soon as you start plugging those values in, you're going to get a preview of here, and you can start changing those values, so you can really get a good field for what these values are going to do and how it's going to integrate into the element that you're trying to style. And what's really cool about it is you're going to get some code right down here that you can just click, copy, and then paste into your own CSS, and it's going to tell you which versions of browsers support this so that makes it really handy to make sure that you're going to be as cross- browser compliant as possible.
Another one of my favorite tools is Adobe Kuler. One of the things that I find kind of difficult is coming up with a color scheme for my site, especially for navigation. So what's great about Kuler is they have a lot of preset colors that people have saved, but you can just go ahead and start your own. You can click right here to go to the editor, and you can click a color, and you can certainly change it if you want, set that as your Base Color, and then you can use all of these different rules like Monochromatic, Complimentary Compound, you can use shades of the color, you can change the brightness and the darkness of it, and it's going to give you different values for this.
HSV, it's going to give you RGB, it's going to give you hex values so you can copy and paste those in, and you can sort of play around with these color schemes to see how they work together before you commit to using them in your site. So I love Kuler, it's a tool that I use all the time. I also wanted to show you guys CSS Sprites, which is a nice little tool for generating sprites. You know, if you have Illustrator, and you have Photoshop, and you feel like creating those on your own, you certainly can, there's nothing wrong with that. But if you'd like you can use a tool like this, and there are a lot of them online, but this is one that I actually really like, but certainly if you go ahead to Google, Google CSS sprites generator, you're going to see a ton of these schools.
And essentially, the way most of these work is you upload multiple graphics, and these will stitch them together in a sprite for you, generate the sprite which you can then download and then generate the CSS code that allows you to access the different graphics within the sprite. So that way there's no guessing as to, what I need to use to position this particular icon, and these tools work really, really well, they are a great way to save a little bit of time. So kind of experiment those tools see if you like them and see if they fit your workflow. And of course, the last resource I am going to point you to is lynda.com.
You know, if you want to continue learning CSS, I recommend checking out all the other CSS related titles in the lynda.com online training library. We have a variety CSS courses structured around both authoring tools, in general concepts and the library continues to grow every single day. Now if you started here in this course, I recommend actually going back and checking out the CSS Fundamentals, CSS Core Concepts and the CSS Page Layout courses. Of course, keep an eye out for all of the courses in our CSS series.
Just look for CSS: and then a course name. We're going to continue to add new courses in the CSS series, so be sure to check back the library often for new releases. Once again, thanks for watching, and I'll see you in my next title.
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.