CSS sprite,css Sprite generation tool V3.0 Update

what is a css sprite

CSS Sprite in the domestic many people called the CSS Wizard, is a Web page image application processing method. It allows you to include all the scattered images of a page in a large image, so that when you visit the page, the loaded picture will not be shown as a picture of the past.

Why do you use this tool ?1. Speed up page loading

The browser accepts the number of simultaneous requests is 10, if the picture too much will affect the overall visual effect, and for the unstable network bandwidth, load is a nightmare, so the picture stitching into a large image, so as to speed up the loading speed, and speed up the page rendering

2. Post-maintenance is simple

The tool can be directly through the selection of pictures to Mosaic pictures, of course, you can also move the inside of the picture, to layout your sprite, directly generated code, easy to use

3. Open Source

The program has been open source on GitHub, address: https://github.com/iwangx/sprite

csdn (do not divide)

http://download.csdn.net/detail/wx247919365/8660503

How to use1. Use PS or DW to cut down the desired picture2. Open CssSprite.exe

Open CssSprite.exe File

3. Open the picture

Click the top left button to open the picture

Now only one type of picture file can be opened at a time in the version

4.. sprite File

New in this update to create a picture when the same time to generate the function of the. Sprite file, you can click the button "Open. Sprite" button, select the. sprite file, restore Sprite view

Be sure to ensure that the. Sprite is in the same folder as the picture file within it

5. Arranging pictures

You can choose the top button above the default arrangement of today or the other, you can also select the mouse to drag the location of the picture, the program will be based on the location of the internal image to generate the smallest sprite chart, of course, will change the corresponding picture location

You can click on the +,-image button to add and delete pictures, currently only work on a single picture.

6. Code Generation

In the program can generate sass code, as well as CSS code, to see what they need, their choice, select "Whether the phone side" will be all the size divided by 2, because the mobile phone will tend to be larger design diagram, so to scale, it is recommended to create a picture and then copy the generated code

7. Save Sprite Chart

Click on the "Generate Sprite" button, the program will default to the 3rd step when you open the address of the picture, and then click OK to generate Sprite chart.

Generates a. sprite file at the same time

 

CSS sprite,css Sprite generation tool V3.0 Update