Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
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, but I zoomed up on them so that you could see in terms of how I was positioning these icons. So if I measure from like the middle point of one to the midpoint of what another, it's right around 100 pixels. So I designed them to be about 100 pixels apart from each other, just to make it a little bit easier for me to position these.
So essentially what you do with CSS sprites is you take this and you position it using background images, and then you change the background position for each separate individual item that you want to display a different icon for. And you can use that for icons. You can do interface elements with this. There are a lot of different things that you can use sprites for. And there are sprite files out there that are huge. This is a very are small one. Now if you are wondering, well, why did you put them closer together? Well, there are two reasons for that actually. One, is that you can do some very easy math now, because they are 100 pixels apart from each other, so it's very easy for me to understand the offsets that I need to do.
And the second thing is this particular set of sprites is used in both a horizontal and a vertical menu, and if you use this, say, in a vertical menu and there's too much spacing between elements, if these icons are close together, you would actually see multiple icons at a time. So that's why I have little bit extra space there too, to keep those elements away from each other when I using them within a menu structure. I am going to go into our file that we are going to be working on for this exercise, and this is the sprites.htm file. You can find this in your exercise files, in the 08_07 directory.
If we scroll down into the code here, we have an unordered list with some links inside of it. Notice they all have class attributes of Gallery, Gear, Contact, and Shop. You can see just above that we have some anti-selectors, and then we have the link selector inside the section, and that's what I am going to start with. So currently right now the only background declaration we have is the color. So what I'm going to do is I am going to add--remember, we can do multiple backgrounds--so I am going to add a sprite to this. So I am going to go to the existing background declaration and right after the color, I am going to add a url, and the image that I am going to add to this is _images/icon_sprites/25.png.
Now the same rules that we were working with with multiple backgrounds before don't necessarily apply here. You notice we don't need a comma because we are not separating different background images, and anytime you have a color declaration within a background, it's always painted at the very bottom of the stacking order, so the images are going to show up on top of this. Now, I don't want this background graphic to repeat, so I am going to do no-repeat. Save that and preview that in my browser. There we go. We are getting our icons showing up, and right now we only have the first icon in there, but one thing at a time.
The other thing I notice is it's not exactly lined up exactly where I want that, and that has more to do with the fact that it's lining up in its default position of the top left-hand corner. Anytime you are going to build a menu structure like this, typically you are going to add padding or line height to make your text sit in the middle of that link, and then you are probably going to put a little padding obviously on left-hand side to keep it away from the icon. So there's always that little bit of adjustment that you have to do. Typically, I'll just do that visually. I will just come in and I will just type in some offsets until I get it where I want it. In this case if I go back into my code, directly after the no-repeat declaration, I am just going to do a quick little offset here.
I am going to 5 pixels for horizontal. That's going to move it over away from the left edge of the link. And then after that I am going to do 7 pixels' worth of vertical offset. So if I save that and go back in and test it, you can see that that just snugs it right into where we want that. I didn't just come up with those numbers magically; obviously as I was developing the exercise, I just kind of messed with those values until I got it where I wanted to. I had an idea, sort of what it was going to be, but you always have to sort of mess with them a little bit, especially depending upon the icons themselves.
You know, you'll probably end up having to do the same. What we want to do is we want to show each of the individual icons for the different links. Galleries is correct, but Gear, Contact, and Shop need to change. So I am going to go back into my code and I am just going to take this offset off. I am just going to cut those values, because you'll notice we have some individual declarations for each of those links. And what I am going to do is instead of declaring a new background every single time, I am just going to do background-position.
So I am going to use that stand-alone property, and I am just going to paste in the offset for gallery, because we know that offset works. Now I am going to copy this property, because I am going to use it over and over again, and for Gear I am just going to paste that in. The horizontal offset is not going to change, but the vertical offset will. Here's what you need to know about moving items up and down. A positive value, a vertical value is going to move you down. It's going to move your image down. You can see it was at the very top of it, but because we did positive 7, it's now moved down a little bit. So if you remember from looking in the Photoshop file, these icons are actually down. So if I took my CSS sprite and I moved it in this direction, we wouldn't see anything.
So in order to show off these icons, I am going to need to move it in the opposite direction, which means I am going to have to go to the negative. Now remember, these icons are about 100 pixels apart from each other. If I come in and if I were just to do a -100-pixel offset, I would see it, but it wouldn't be centered the same way the previous one is. So what I have to do is I basically just have to subtract 7 from each of my offsets in order to get everything to line up precisely where I need it. And typically you are going to have to do a little bit of tweaking like that.
So I am going to go ahead and paste those for each of these, and for every single one of them, I am just going to add 100 to the offset, so that will be -193, and the last offset will be -293. So now if I save this, go back in my browser and refresh, you can see the icons that we wanted to have in place are now in place. It's the same file. It limits the amount of requests we are making. And by just moving the background-position property, again, we are saving a little bit overhead doing that as well. Now there are plenty of people that will change the background-position property based on somebody hovering over something.
So if you want to make the icon change or animator or move based on hovering, you certainly have that capability as well. This example in this sprite file is a fairly simple example, but the sprite themselves can get really, really complex. So if you're interested in this, if you just go out to Google and you do a search for Amazon or Yahoo sprites, those are two that I would recommend you go look at. Go look for Amazon sprites or Yahoo sprites and you can just do the Google image search and you'll find them. And they have just an incredible array of UI elements and icons and all that stuff crammed into one little file.
So they are very impressive, but I would hate to see the math behind positioning all those little icons wherever they need to. Theoretically, really there is no limit to the size that you can make your CSS sprites and how many objects you want to put in it, but it is worth noting that it seems like anything over 5000 pixels and dimensions seems to have a slight blurring problem on Android devices, so that's something that's good to remember if you're targeting mobile devices with your sprites.
There are currently no FAQs about CSS: Page Layouts.
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.