CSS sprites: basic techniques and useful tools
Using CSS sprites on the site allows you to improve performance and correctly organize the interface elements.
Sprite Sheet is one large image of small graphic elements of a site, for example icons or buttons. And thanks to CSS, you can display each element separately.
')
The main advantage of using sprites is that the server downloads all the elements in one file at once. Some may think that uploading small, small-weighing images can increase the performance of the site, but this is not true - in the case of individual images, the number of HTTP requests increases. Also, using a single sprite reduces the weight of the graphics. Example of sprite on webdesign tuts site :
Sample code for using sprites on a page ( demo ):
Also, sprites are often used to create a simple and cross-browser hover effect ( demonstration ):
There are two approaches in the preparation of sprites: before and after the development of the site. In the first case, all small pictures of the interface are compiled into one file at the final stage of the site creation. In this case, it is convenient to edit individual images, as well as use them separately, if necessary. This method is more suitable for novice web designers.
More experienced developers are preparing sprites at the initial stage, it allows you to better organize the graphics of the future design, as well as prepare a PSD template for layout.
When preparing a file with sprites, it is worthwhile to compact images as much as possible, and if they are the same size (for example, icons), create a grid that will simplify the use of sprites on the site:
The file should be prepared in such a way that future changes in it will not affect the location of already existing elements, otherwise you will have to edit all the CSS. The PSD file with sprites must be clearly labeled: it is necessary to clearly name all layers and groups, and also try not to merge layers that may be changed in the future.
Compass is a great framework that can create sprites from a folder with images. Also uses Sass.
Lemonade is a tool that allows you to create files with sprites by simply adding a line of code to Sass files.
SpriteMe is a bookmarklet that can generate and view sprites used on the site.
Here is what the working bookmarklet layer looks like:
Fireworks CS6 - the latest version includes the function of generating sprites.
Spritepad - drag-and-drop service for creating sprites
Sprite Cow is a service for convenient “slicing” of a manually prepared sprite file.
Glue - command line for generating sprites
CSS Sprites - another generator with advanced settings
SpriteRight - a generator application for Mac
Used materials and useful links:
Sprite Sheet is one large image of small graphic elements of a site, for example icons or buttons. And thanks to CSS, you can display each element separately.
')
Practical application
The main advantage of using sprites is that the server downloads all the elements in one file at once. Some may think that uploading small, small-weighing images can increase the performance of the site, but this is not true - in the case of individual images, the number of HTTP requests increases. Also, using a single sprite reduces the weight of the graphics. Example of sprite on webdesign tuts site :
Sample code for using sprites on a page ( demo ):
<html> <head> <style> #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites.gif') 0 0;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites.gif') -47px 0;} #next{left:129px;width:43px;} #next{background:url('img_navsprites.gif') -91px 0;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="prev"><a href="css_intro.asp"></a></li> <li id="next"><a href="css_syntax.asp"></a></li> </ul> </body> </html> Also, sprites are often used to create a simple and cross-browser hover effect ( demonstration ):
<html> <head> <style> #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites_hover.gif') 0 0;} #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites_hover.gif') -47px 0;} #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next{left:129px;width:43px;} #next{background:url('img_navsprites_hover.gif') -91px 0;} #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="prev"><a href="css_intro.asp"></a></li> <li id="next"><a href="css_syntax.asp"></a></li> </ul> </body> </html> Before or after?
There are two approaches in the preparation of sprites: before and after the development of the site. In the first case, all small pictures of the interface are compiled into one file at the final stage of the site creation. In this case, it is convenient to edit individual images, as well as use them separately, if necessary. This method is more suitable for novice web designers.
More experienced developers are preparing sprites at the initial stage, it allows you to better organize the graphics of the future design, as well as prepare a PSD template for layout.
Organization of design elements
When preparing a file with sprites, it is worthwhile to compact images as much as possible, and if they are the same size (for example, icons), create a grid that will simplify the use of sprites on the site:
The file should be prepared in such a way that future changes in it will not affect the location of already existing elements, otherwise you will have to edit all the CSS. The PSD file with sprites must be clearly labeled: it is necessary to clearly name all layers and groups, and also try not to merge layers that may be changed in the future.
Useful tools
Compass is a great framework that can create sprites from a folder with images. Also uses Sass.
Lemonade is a tool that allows you to create files with sprites by simply adding a line of code to Sass files.
SpriteMe is a bookmarklet that can generate and view sprites used on the site.
Here is what the working bookmarklet layer looks like:
Fireworks CS6 - the latest version includes the function of generating sprites.
Useful services
Spritepad - drag-and-drop service for creating sprites
Sprite Cow is a service for convenient “slicing” of a manually prepared sprite file.
Glue - command line for generating sprites
CSS Sprites - another generator with advanced settings
SpriteRight - a generator application for Mac
Used materials and useful links:
- CSS Sprite Sheets: Best Practices, Tools and Helpful Applications - tutplus.com
- CSS Image Sprites - w3schools.com
- CSS Sprites: How They Use Them - css-tricks.com
- Using CSS Sprites to optimize your website for Retina Displays - Maykel Loomans
Source: https://habr.com/ru/post/159027/
All Articles