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 - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Creating multi-column text6m 36s
-
(Locked)
Using borders to enhance design13m 59s
-
(Locked)
Rounding corners6m 56s
-
(Locked)
Adding drop shadows10m 35s
-
(Locked)
Working with opacity6m 8s
-
(Locked)
Utilizing the background property15m 5s
-
(Locked)
Working with CSS sprites7m 58s
-
(Locked)
Enhancing page design: Lab6m 22s
-
(Locked)
Enhancing page design: Solution8m 38s
-
(Locked)
-