Front End Programmer Question: Download Front End Developer PDF

Do you know what is a sprite? How is it applied using CSS? What is the benefit?

Answer:

- A image sprite is a collection of images put into one single image.
- Using css positioning you can show and hide different parts of the sprite depending on what you need.
- Sprites reduces the number of http requsts thus reducing load time of page and bandwidth

Buy Buttons using Sprite as background:

Both buttons use the same background image. The only differece is in the positioning.
BUY BUY

Here is the actual background image:
And the CSS.

<style>
.orangeBuyBtn {
background: url('buyButtons-bg.gif') repeat-x 0 0;
border-color: #5B5752 #6B6B6B #808080;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}

.greenBuyBtn {
background: url('buyButtons-bg.gif') repeat-x 0 -24px;
border-color: #5B5752 #6B6B6B #808080;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
</style>
Learn more about sprites at Smashing Magazine. Also see the Site Point article or this W3School Article.

Download Front End Developer PDF Read All 67 Front End Developer Questions

Previous Question	Next Question
Explain the difference between static, fixed, absolute and relative positioning?	Using jQuery how would you hide the image when the user clicks it for the following code snippet? <div class="content"> <p>Some Content Here</p> <p class="loader"><img src="ajax-loader.gif"></p> </div>