What sprite sheets can do to improve your site and how they are made?
Sprites are used to decrease load time by decreasing the amount of http requests made. Lesser http requests means less load time and faster access to your web pages. This makes it much more beneficial for users and decreases bandwidth usage on the page. The idea is to take a bunch of images and literally stick them into one big image thereafter only showing sections on your browser screen by means of CSS. The CSS will control what part of the large image is show in a section of the browser. Another pro to using sprites is that it would help your Google rank, Google takes into account the load speed on a page and you can improve page ranking in some instances by introducing sprites (more about this can be found in 5 Simple ways to increase your Google ranking). There are many more uses for sprites that will be covered later.
How to create a CSS sprite:
1. a CSS file,
2. the HTML and
3. the sprite sheet
The CSS style controls the positioning of the sprite image. The HTML is the file used to render all the information in a browser, so we'll be doing most of the work in the CSS and sprite sheet. CSS background positioning works a lot like positioning an absolute positioned div, accept that all the x and y axis are in negative, as seen in the illustration on the left. This is important to remember, or you'll be positioning your x and y axis of the the image incorrectly.
Tutorial on creating CSS sprite for navigation:
Here's what we'll need, a sprite sheet:
When we're done, you should have something looking like this with rollovers and click:
Here's the HTML you'll require for the CSS sprite:
We're using div's because it's become a standard on the web, although you could use list tags for this too.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS sprite Sheet</title> <link href="CSS_spriteSheet.CSS" rel="stylesheet" type="text/css" /> </head> <body> <div><a href="#">Home</a></div> <div><a href="#">About</a></div> <div><a href="#">Contact</a></div> <div><a href="#">Products</a></div> </body> </html>
Here's how you'll calculate pixel values on sprite for CSS use:
background:url(image-path); background-position:0px /*the stance from left to right)*/ -39px /*the distance from top to bottom*/;
Here's the CSS you'll require for the CSS sprite:
div /*controls all the widths and heights*/
{height:28px;
width:133px;
margin:0 1px 0 0;
font-family:"Trebuchet MS";, Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:700;
float:left;
text-align:center;
background:url(spriteCSSButtons1.jpg);
}
div a /*this display the button section of the sprite*/
{display:block;
width:133px;
height:28px;
background:url(spriteCSSButtons1.jpg);
color:#FFF;
text-decoration:none;
padding:10px 0 0 0;
}
div a:hover /*hover command display the rollover section of the sprite*/
{display:block;
width:133px;
height:28px;
/*the 0 and -39px at the end of the background style
is where we position the image, 0 = the left positioning
and -39px = the height positioning*/
background:url(spriteCSSButtons1.jpg) 0 -39px;
color:#FFF;
text-decoration:none;
padding:10px 0 0 0;
}
div a:focus /*focus command display the click section of the sprite*/
{display:block;
width:133px;
height:28px;
/*the 0 and -39px at the end of the background style
is where we position the image, 0 = the left positioning
and -78px = the height positioning, can you see that
we're moving the image down to display different sections of it*/
background:url(spriteCSSButtons1.jpg) 0 -78px;
color:#FFF;
text-decoration:none;
padding:10px 0 0 0;
}
Where to use sprites
Sprites are commonly found on buttons and various generic elements on a site (elements you wouldn't need to update regularly), in some cases you could sprite an entire site providing the sprite sheet doesn't grow too large. Spriting is a method of replacing those large JavaScript files that help with rollover functions on buttons, this is why sprites are mainly used in buttons, navigation bars and anything that doesn't need frequent updating on a site such as icons.
Examples of where sprites are used:
Apple.com use sprites on their site in an affective user friendly way.
By using sprites in their navigation, Apple is able to have various different styles on their navigation, for example when your mouse hovers over the desired link, the link will change in style, same goes for clicking and when the link is active. This is a bonus when it comes to user experience and it's done with not too much effort.
YouTube use sprites for all their controls.
YouTube use sprites to decrease time spent on downloading images making the site and pages more aimed at streaming a movie, the sprite sheet contains all the images that rating controls use and all the basic layout imagery.
Google use sprites for all their controls and icons.
Keeping with the minimalism, Google very recently implemented icon to their site making it more user friendly and allowing the user to find what they're looking for visually but still keeping their site search focused.
No comments:
Post a Comment