Cssgaga Tutorial: Autosprite (CSS Sprite Generator)

Article Introduction: cssgaga–autosprite (CSS Sprite generator).

There are some sprite generators on the market, either to manually adjust the picture position, or to copy and paste the code, used to always feel not cool, Cssgaga use different ideas, hoping to liberate your hands: Use to select Autosprite to open this feature, the following an example to illustrate: such as HTML:

<s class= "I1" ></s><s class= "i2" ></s><s class= "i3" ></s><s class= "I4" >< /s><s class= "i5" ></s><s class= "I6" ></s>

CSS source file:

Body{background-color:black;}
S{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat:no-repeat}
. I1{background-image:url ("Slice/1.png");
I2{background-image:url ("Slice/2.png");
I3{background-image:url ("Slice/3.png");
I4{width:64px;height:64px;background-image:url ("Slice/4.png");
I5{background-image:url ("Slice/3.png");
I6{width:64px;height:64px;background-image:url ("Slice/6.gif");
I11{width:60px;height:60px;background-image:url ("slice/1.jpg");
I12{width:60px;height:60px;background-image:url ("slice/2.jpg");
I13{width:60px;height:60px;background-image:url ("slice/3.jpg");
I14{width:60px;height:60px;background-image:url ("Slice/4.jpg");}

After Cssgaga is generated:

Body{background-color:black} s{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat: No-repeat}. I1{background-image:url (sprite/style.png); background-position:-128px 0}. I2{background-image:url ( sprite/style.png); background-position:-128px-16px}. I3{background-image:url (Sprite/style.png); BACKGROUND-POSITION:-128PX-32PX}. I4{width:64px;height:64px;background-image:url (Sprite/style.png); background-position:0 0}. I5{background-image:url (Sprite/style.png); background-position:-128px-32px} i6{width:64px;height:64px; Background-image:url (sprite/style.png); background-position:-64px 0}. i11{width:60px;height:60px;background-image : URL (sprite/style.jpg); background-position:0 0}. I12{width:60px;height:60px;background-image:url (sprite/style.jpg); background-position:-60px 0}. i13{width : 60px;height:60px;background-image:url (sprite/style.jpg); background-position:-120px 0}. i14{width:60px;height : 60px;background-image:url (sprite/style.jpg); background-position:-180px 0}

Generate Sprite Pictures sprite/style.png and sprite/style.jpg


file comparison:

	before	after
html	before.htm	after.htm
css	style.source.css	Style.css
png/gif Total size: 10.2KB jpg total size: 8.69KB slice/1.png slice/2.png slice/3.png Slice/4.png Slice/6.gif slice/1.jpg slice/2.jpg slice/3.jpg slice/4.jpg	5.83KB Sprite/style.png 7.19KB sprite/style.jpg

Detailed

• The broken picture is placed in the slice folder, the Slice folder is the same as the CSS and refers to the relative path
• CSS calls to the picture's statement cannot be abbreviated, to write the complete

  Background-image:url ("Slice/1.png")

  It doesn't matter whether you write it or not, it will be compressed, and the following writing will not take effect.

  Background:url ("Slice/1.png")

• Can handle PNG, GIF (do not support animated GIF, as PNG8 processing) and JPG format, if the generated sprite will be converted to PNG8, it is recommended to use the PNG8 format png32
• Cssgaga generated Sprite placed in the Sprite folder with the slice sibling, automatically compressed after the build, file name is the CSS filename + picture suffix (png/jpg), each CSS generates up to 2 sprite (png/jpg), PNG is a PNG8 with alpha transparency (this feature is available for fireworks, Photoshop does not), and can be used to achieve progressive enhancement
• Automatically replaces the Background-image URL in the CSS after the sprite is generated and automatically generates the corresponding backgroud-position
• Using the Sync feature allows you to copy both CSS and generated sprite, select the build local file to keep in the local sprite directory, or delete it after synchronization
• In the future, it will gradually optimize the area of sprite as much as possible, and the user can only update Cssgaga without changing the code

Cssgaga–autosprite View more VideosFrom Ytzong