Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Patrick Brown
7,995 PointsBug 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
Jason Anello
Courses Plus Student 94,610 PointsThat 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
39,199 PointsPatrick 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.
James Barnett
39,199 PointsJames Barnett
39,199 PointsSprites 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.