Join James Williamson for an in-depth discussion in this video Using CSS sprites for icons, part of CSS: Styling Navigation.
In this exercise we're going to use single Sprite image to display the icons for our main menu items.…We're going to focus on positioning the icons, modifying the existing links so that the icons…will fit inside of them and then some of the considerations that we have to give for the…different hover states so that our icons stay consistent.…So I have the sprites.htm file open from the 06_05.…I want to point out that inside the _assets folder in this same directory, we have the…original icon_sprites file, it's an Illustrator file.…
If you wanted to open that up, if you have Illustrator, and kind of use it as a reference…as we work on this exercise, feel free to do so, that's fine.…If you don't, don't worry, it doesn't detract from the exercise at all, it might be helpful…to you to kind of really get a feel for why we're doing some of the things that we're…doing if you can reference that file, okay?…Now, before we get too deep into this, I have a confession to make.…I could have made this exercise easier on you by using like just the static horizontal…
- Organizing menus with lists
- Creating block-level links
- Styling links, link states, and image links
- Defining link dimensions
- Controlling link spacing in a menu
- Creating rollovers
- Clearing floats
- Indicating current pages
- Controlling cursor states
- Building dropdown menus
- Creating CSS-only buttons
Skill Level Beginner
1. Structuring Navigation
2. Link Styling Basics
3. Creating a Vertical Menu
4. Creating Horizontal Menus
5. Dropdown Menus
6. Enhancing Navigation with CSS
Additional resources6m 29s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.