How to Use - CSS Sprites Generator
Free for personal and commercial use
It is very easy to generate CSS Sprites with just a few mouse clicks !
Just do the following steps :
Step 1 - Add Images
At first, you will have to add the images that you want to convert into CSS Sprites.Just press the "Add Image" button or select "Add" from the "Image" menu.
Step 2 - Set sprite properties
After adding your image you will have to select each image from the list on the left and then specify your desired css class names of your CSS sprite and also a label. The label is only there to help you identify the image in the CSS code.For each image, you add a new CSS class will be generated in the CSS code.
Step 3 - Set combined image and image placeholder URLs and filepaths
Then you will have to specify the combined sprites image file path to be generated. You can choose between GIF, PNG and JPG image file types.You will have also to specify the URL of the combined sprites image, as it will be on your web page.
Also, a placeholder image is required in order for CSS Sprites to work.
CSS Sprites Generator has already a default placeholder image that will get copied to your specified location.
You will have to specify the file path of the placeholder to be generated and also its URL on your web page.
Step 4 - Generate CSS Sprites
Afterward, press on the "Generate" button or select "Generate CSS Sprites" from the "Tools" menu and then the combined spirtes image will get generated along with the CSS and HTML code.CSS Sprites Generator will generate one combined sprites image, a placeholder image and a css-sprites.html HTML file and a css-sprites.css CSS file.
Windows Explorer will open when done with the generated CSS file selected.
Step 5 - Upload files
Then you will have to upload the generated CSS image sprites image to your web page and the placeholder image to your web page and at the previously specified location.Step 6 - Edit HTML, CSS code of your webpage
Lastly, you will have to edit your webpage's HTML and CSS code based on the generated HTML and CSS files.The source URL of each image has to be replaced with the URL of the placeholder image and a CSS class has to be added to the image tag of each image. In your CSS code, you will have to paste the CSS code that got generated.
Back