Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Bug Report on Home Screen. Also, questions...

So I checking out my points on the home screen, and I noticed a "close" option (a red X) on the top of the screen I'd never seen before.

So being curious, I closed the points window to see what would happen. Well, the points panel collapsed, but when I clicked the rollover drop down arrow again, I noticed it turned a weird green color and shape.

So I dug a little deeper in the inspect element panel and found this.

It appears to animate the drop down arrow, it tries to rotate the .svg 180 degrees and ends up displaying a partial green Treehouse logo.

So my question(s) are: I've been steadily working my way through the Web Design track and I don't really recall this in the CSS animations or HTML sections. Is there a name for this? Is this considered "best practices" for menu elements? How do I implement this on my site, or when is the best time to implement this for an hypothetical client?

(Note: I am using Chrome 33.0.1750.154 m on Windows 8.1 at a 1900x1080 resolution)

2 Answers

That image is referred to as a sprite sheet. By combining all of your background images into a single image the browser only has to download 1 image. You only have 1 http request instead of 20 for example. It can also save on file size as well. Not sure if it works the same with svg's but if you combined some png's I've noticed the file size can be less than the individual file sizes combined.

I haven't seen the problem you noticed but the sprite somehow was positioned in the wrong spot, showing the wrong part of the image.

You can think of it as looking through a small opening, and the big image is moved around so you can see all the little images one at a time.

I haven't used them yet because I've only dealt with simple sprites of a few items but I think there are css sprite tools that you can use to create these. They manage the positions of all the individual images and I think they can output some css for you as well.

To use these sprites, you have to know the coordinates of where each image is at so you can properly position the background image. You also have to know the size of each individual image so you can properly size the element which is going to receive this background image.

Hopefully that's enough to get you started on this.

James Barnett
James Barnett
39,199 Points

Sprites are great however, in a lot of cases icon fonts might be a better fit. If you need custom icons but only have a few icons instead of making a spirte sheet you can use data-uri which also saves an http request.

James Barnett
James Barnett
39,199 Points

Patrick Brown - Looks like you found a bug, if you want to help Treehouse improve send an email directly to the Treehouse Support Team help@teamtreehouse.com with the info about what you found the screenshot and the details about your setup.