Css sprite, css sprite generation tool V3.0 update, spritev3.0

Css sprite, css sprite generation tool V3.0 update, spritev3.0
Major V3.0 improvements

1. added the function of adding and deleting a single image separately.

2. added the. sprite file to save sprite information.

3. added the. sprite file opening function.

What is css sprite?

CSS sprite is a processing method for web page image applications. It allows you to include all the sporadic images involved in a page into a large image, so that when you access the page, the loaded image will not be shown as slowly as before.

Why use this tool? 1. Speed up webpage Loading

The number of requests received by the browser is 10 at the same time. If there are too many images, it will affect the overall visual effect. In addition, it is a nightmare to load unstable network bandwidth, therefore, the image is spliced into a large image to accelerate loading and page rendering.

2. Easy Maintenance

This tool can directly splice images by selecting images. Of course, you can also move the images in the tool to layout your sprite images and generate code directly, which is easy to use.

3. Open Source

The program has been open-source on github, address: https://github.com/iwangx/sprite, to build your own sprites generate Tool

Csdn (no score)

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

For example, if you want to use "1", use "ps1_dw" to cut down images. 2.open csssprite.exe.

Open the csssprite.exe File

3. Open the image

Click the button in the upper left corner to open the image.

Only one type of image files can be opened at a time in the current version.

4. sprite File

In this update, the. sprite file is generated when an image is generated. in the program, you can click the "open. sprite" button, select the. sprite file, and restore the original view of the sprite.

Make sure that. sprite and its image files are in the same folder.

5. Arrange Images

You can select the default layout of the above button today, or you can select the drag position of the image. After dragging, the program will generate a Sprite with the smallest area based on the position of the internal image, of course, the corresponding image location will also be changed.

You can click "+" and "-" to add or delete images. Currently, you can only operate on a single image.

6. Code Generation

The sass code and css code can be generated in the program. If you need it, you can choose whether it is a mobile phone. When you select "whether it is a mobile phone", all the sizes will be divided by 2, because the design drawing on the mobile phone end is usually relatively large, it is recommended that the generated code be copied after the image is generated.

7. Save sprites

Click "generate sprite". By default, the program selects the address of the image you opened in step 1, and click "OK" to generate the sprite.

The. sprite file is generated at the same time.