CSS sprites tool - CSS sprite generator - Free online tool to generate CSS sprites easily with drag and drop, projects


Drop Images here or click to upload. Please upload only PNG, GIF and JPEG Images.


Image File Type:
CSS Class Prefix:
Alignment :
Padding : pixels





Download 4dots Software applications !

I would like to :

Video

Cut a video clip

Convert video files to other formats

Batch join video files into one large file. Merge MP4, AVI, MOV, MKV even if they have different format, size or aspect ratios.

Rotate video or flip video to fix them

Compress video size while retaining quality

Split film into equal parts, by time, by file size or by keyframes

Remove watermark from video

Audio

Convert Audio Files to different formats

Cut MP3 files or other audio files

Merge MP3 files with fade in, fade out, crossfade and more.

Convert MP3 to WAV

Convert FLAC to MP3

Convert WAV to MP3

Convert M4A to MP3

Convert Video to MP3

Convert MP4 to MP3

PDF

Remove PDF Password

Extract Images from PDF documents

Convert PDF documents to JPG Images

Batch edit PDF metadata

Protect PDF documents with a password

Convert PDF to text

Compress and shrink PDF documents

Join PDF documents

Split PDF documents

Delete pages from PDF documents

Extract pages from PDF documents

File Management

Delete Currently Used, Locked, Undeletable, Busy Files

Batch replace text in many Text, Office, PDF files

Clean empty folders to declutter computer

Split or join files

Validate file MD5 or other hashes

Copy full path of file in Windows Explorer with a right mouse click

Copy the contents of text files directly to the clipboard with a right mouse click

System

Launch the command prompt from any folder in Windows Explorer

Execute in Windows Explorer programs with arguments

Disable any key on your keyboard

Password Recovery

Crack RAR Password

Crack ZIP Password

Unlock pdf file easily and crack PDF passwords.

Webdesign

Batch HTML validate and fix validation errors to improve SEO

Create HTML Imagemaps

Create CSS Sprite Images for SEO purposes

Develop HTML Webpages

Graphics

Compare photos side by side

Resize, convert, edit images in batch mode or directly from Windows Explorer

Create correct color schemes for designs

Desktop

Hide applications from screen with a keystroke

Minimize any application to the windows tray

Other

Organize documents in a tree structure

Instructions

cssspritestool.com is an easy to use CSS sprites generator tool. CSS Sprites are useful for SEO purposes and for website performance improvement.

cssspritestool.com is unique because it allows you to load and save projects and reuse your work and css sprites another time later.

Simply, drag and drop images (png,gif,jpg images) and then press on the "Generate CSS Sprite" button to generate the css sprite. Then the combined sprite image will be generated and displayed to you and also the required css and html code to use it on your site. Copy and paste this code to your site and download and add the generated image to your site.

To download the generated files directly as a zip archive, press on the "Download Zip Package" button.

If you press on the "Download Zip Package" button then in the Zip archive that you have downloaded, you will find a file called "Project.cssproj.zip". This is the project file and you can use it to reuse your work later.

To open a project simply drag and drop the "Project.cssproj.zip" file and then press on the "Open Project" button that will appear.

You can also set the padding between the images of the sprite, the alignment of the sprite (horizontal or vertical) and also the css class prefix. Also, you can set the desired sprite image type (png,gif or jpg).

Maximum Image Size : 25MB

Maximum Number of Images:200

Time till sprite image Files get Deleted: 1 day


Please Donate!

Please Share!
 
Information :

From W3 Organization Article https://www.w3.org/wiki/CSS_background_images#Sprites

Sprites

Users want it all. They want your site to be glamorous, interactive, and also fast, however including large numbers of CSS background images can slow your site down considerably—the more HTTP requests you make, the slower your site will be (an HTTP request is when your computer is accessing a web site and needs to ask the server to send it another asset that makes up the site, such as a CSS file or image - each additional request means a longer loading time for the site). To get around this limitation, you can combine related icons into a single image, known as CSS Sprites. The background-position property allows you to then place the image in the appropriate positions so the icons display through the window of the HTML element the CSS sprites are attached to.

For example in Figure 13, you will see that to display the earth icon through the HTML window you can place the image using left top. To move the position of the image so the alert icon is displayed, the background position needs to be changed to -80px 0. The negative horizontal value pulls the image to the left.

Only the part of the background image which is inside the HTML element is visible

Figure 13: Using CSS Sprites to reduce HTTP requests.

More information : CSS Sprites: What They Are, Why They’re Cool, and How To Use Them