From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Working with CSS sprites

Working with CSS sprites - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Working with CSS sprites

“

Resource management is becoming increasingly more important in web design, especially when designing for mobile devices. One of the ways that we can improve the mobile performance of our sites is to make fewer HTTP requests. CSS sprites, which is one way of having multiple icons or images in a single file, is one of the ways that we can do this. So I'm previewing the page that we are going to be working on. I am previewing the finished version of that page in a browser right now. We have got a menu right over here with these different icons in it. And I'm guessing that unless you had seen CSS sprites before or worked with them before, you would probably think that those are four separate icons that you're looking at, but they are not. They are actually one single file. If I switch over to Photoshop with that file open, you can see that each of these icons is part of a single file. They don't look great right now, partly because I drew them, and partly because I am zoomed up on them…

Contents