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.
In our final lab, we are going to enhance our Roux Academy site by adding a pure CSS button and utilizing CSS Sprites. So let's take a look at what we're going to be building. All right, so the first thing that you are going to be doing is working on a button, and here I am on the Information Request form. This is the page you are going to be working on. Down at the bottom where you have Submit button-- and I want you to style that anyway that you want to make a pure CSS button out of that-- I'll go into the particulars in just a moment. And then the next thing you're going to be doing is we have this little section over here that says Connect with us that has some of the social media icons on it.
If you hover over those, you can see that they have a hover state on them as well, and those are all one single image. So they are Sprite image that you can work with. So we are going to be using CSS Sprites and CSS only buttons in this particular lab. Now I'm going to switch over to my code editor, and we are going to go to the steps in just a moment, but I wanted to show you in the _assets directory of the 06_07 file, I have those Sprites that I was showing you a second ago, I have the Illustrator file in there, and if you don't have Illustrator, I also have the PDF files. So if you want to open those up and take a closer look at how those are created and how they're spaced, you can go ahead and do that as well.
All right, so the file you are going to be working on is in the 06_07 directory, it's under admissions, and it's the request.htm. You're also going to want to open up the main.css file which is found in the _css directory. So here I am in the main.css file, and here are our lab instructions, and let's just go through the steps. Step number one, Using what you learned earlier in the chapter, I want you to create a CSS button for the form submit button of the request.htm page, the one we were just looking at.
You've got two existing selectors that you are going to use to do this, both of them are this input type select, there is a default select and then there is hover one as well which you can use to target that button. I'm not going to give you any direction. I want you to use your own creativity, using effects like gradients, box shadows, borders, all those stuff that we've been learning up till now and even if you want to experiment with others like text shadow, go ahead. There are two resources I'm going to point you to, to help you with this, the gradient generator that we used earlier, use a link to that, and there's also a resource called CSS3 Generator. You can copy and paste that link into your browser right there, and with that one, if you want to do things like box shadow, it gives you a nice visual way to do that, and then you can copy and paste the code as well. So that's two really great tools.
All right, so the selectors that you're going to be targeting--I'm going to have to scroll all the way down to around line 766 or so--there they are. So we've got two empty selectors right here that are going to target that button for you, there's the submit, and there's the hover, so you want to create states for both of those on the buttons. All right, the next thing I want you to do is in the request file locate the connect section which is around line 173, and I want you to study the structure of that section. So if I go back in the source code, and I scroll down to about line 173 or so, here's the section of class connect info, and I'm really interested in having you study this unordered list, this menu right here.
It's got the four links which go to Twitter, Google+, Facebook, and LinkedIn. So they are just regular links. What you're going to do is you're going to take the selectors that target those, and you are going to use CSS Sprites in place of the text. Now if I go back over to the main.css, here are the instructions for that. So you are going to find the .connect li a selector that's going to target any link inside of a list item which is also inside that connect section. So it's very specific. It's about line 453 in our CSS. Now you are going to use that as a starting point.
You are also going to write a selector. So you are not going to use that selector, you are going to write new selectors that apply this social_sprites.png file, and you can find that in the _images directory. So make sure the path is a relative path from here, which is the CSS directory, to here which is the images directory, okay. So you want to use that file. Now all of the icons are 45 pixels by 45 pixels and they go in a specific order, Twitter, Google, Facebook, and LinkedIn. Just to give you an idea of what that looks like, I'm going to open this up in Illustrator for you.
So each of these is 45 pixels by 45 pixels, and they go in order. So we have Twitter, Google, Facebook, and then LinkedIn and then the hover states for those are below it. Now remember, if you want to go down, you use -Y values, if you want to go to the right, you use -X values. So it's very important when you're positioning those Sprites. And again, I give you a little bit of direction in that regards. There's no space between them, so the first icon is going to be at 0, 0, the second one is going to be 45 and 0, but remember you have to use negative values to move to the right, so keep that in mind.
Now after you've created the selectors that are going to display each icon, you then also need to create a hover selector for each one that's going to show the hover state. Remember, the hover icons are directly below the first set of icons, okay? So they're using the same X coordinates, but the Y coordinate is going to be 45 pixels down, and I just gave you a reminder that those files are over here in the _assets folder if you want to take a closer look at them. Okay, so that's it. Indeed, you are now on your own. But you know, have fun, have a great time building your button, use it as an exercise in creativity, really experiment with combining different properties together, see what you can build.
You know, also when you're working with your Sprites, don't forget to pay attention to whether you are going to need to use positive or negative values when positioning them. Usually if I'm trying to position the sprite, and it doesn't show up, it's typically because I've used either the positive or negative value when I needed to use the other one. When you're done, be sure to watch the Solutions movie where we'll go over my finished files.
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.