Join James Williamson for an in-depth discussion in this video Using CSS sprites in menus, part of Applied Responsive Design.
- View Offline
- Exercise Files
- Code Practice
We'll finish up our basic menu styling by adding a set of icons.…When using icons in responsive designs, you have the additional consideration of icon…size and how using them is going to impact your site's performance.…I want to take a deeper look at this by first taking a look at the set of icons that we…are going to be using for our basic menu.…Now, I have opened these up in Photoshop. You don't have to do this, but if you want…to open up and kind of experiment with them, you can.…They are the icon_sprites_25.png. You can find this in the 03_03/_images directory.…
I have two sets of sprites. I have got the 25.png and the 50.png.…They are exactly the same.…They are just a little bit larger. The 50 is 50 x 50 pixels for each one of them, whereas…the 25 of course is 25 x 25.…So you can see in a sprite file, each of the icons are just sort of occupying…their own space within this much larger file.…What this allows me to do is by using background images, I can use the background position…property to sort of only show one of these at a time.…
- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites
Skill Level Intermediate
1. Planning Responsive Designs
2. Building Responsive Layouts
3. Responsive Navigation
4. Creating Responsive Media
5. Enhancing Sites for Mobile
6. Managing Resources
Additional resources4m 10s
- 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.