Detta verktyg tillåter dig att automatisera processen av generering av CSS sprites. Ladda upp en ZIP fil innehållande två eller flera bilder (GIF, PNG eller JPG) och verktyget kommer generera en spritebild och de motsvarande CSS reglerna för att visa varje del.

Valmöjligheter

Verktyget har flera valmöjligheter du kan konfigurera så att slutresultatet bättre matchar din sites specifika behov och kännetecken genom ändring av 'Spriten' och CSSen. Dessa valmöjligheter gås igenom nedan:

Ändra storlek på ursprungsbilder

Bredd & höjd
Om antingen bredd eller höjd är satta till under 100% kommer ursprungsbilderna bli reducerade i storlek före de kopieras in i den genererade bilden. Du kan inte specificera ett värde över 100% iom. att en ökning resulterar i en försämring av bildkvaliten. Standard för båda bredd och höjd är 100% (ingen storleksändring).

Bilddubletter

Ignorera bilddubletter
Dubletter kopieras till den genererade bilden och separata CSS regler skapas för varje dublett.
Ta bort bilddubletter men förena CSS klasser
Verktyget jämför genom MD5 innehållet av varje bild för att kunna göra en precis bedömning vad som är exakta dubletter av andra bilder inuti ZIP filen. Dessa dubletter kasseras och CSS regler för dessa dubletter är sammanslagna till en regel.

Sprite utdatamöjligheter

Horisontell kompensation
Detta bestämmer den horisontella kompensationen mellan rader av bilder i utdatan. Värdet behöver vara tillräckligt stor för att ta Safaris problem med repeterande bakgrunder i beaktning. Vi föreslår att du bibehåller standardvärdet.
Vertikal kompensation
Detta bestämmer den vertikala kompensationen mellan varje följande bild. Värdet bör vara tillräckligt stort för att ta i beaktning användarens typsnittsstorlek. Generellt rekommenderar vi att du designar din sida så att besökare kan öka typsnittsstorleken två gånger innan nästa bakgrundsbilden i sekvensen blir synlig.
Bakgrundsfärg
Sätter en bakgrundsfärg för den genererade bilden. Detta fält tar ett värde av sexsiffrigt hexadecimalt värde. Om den lämnas tom och utdataformatet är GIF eller PNG kommer bakgrunden bli transparant.
Sprite utdataformat
Stödjer GIF, PNG och JPG. GIF och PNG kan ha transparanta bakgrunder. Standard är PNG.

CSS utdatamöjligheter

CSS prefix
Varje CSS positionsregel som genereras får följande prefix tillagt. Tillägg av basid och klassval stöds. Följande tecken är tillåtna - a-z, 0-9, _, -, # och .
Filnamns mönsterjämförelse
En giltig regular expression kan användas. Linda en parantes runt den delen av mönstret som du vill använda för bas till de positionerade klassnamnen. Detta hämtas från filnamnet av bilden i ZIP filen.
Klassprefix
Texten kommer läggas till i början av varje genererat klassnamn. Detta är viktigt i de fall där den genererade klassnamnet kommer börja med en siffra pga. att detta resulterar i ett ogiltigt namn (enligt rekommendation av W3C). Följande tecken är tillåtna - a-z, 0-9, _ och -. Prefixet kan inte börja med en siffra.
CSS suffix
Texten kommer att läggas till i slutet av varje CSS regel. "CSS suffix" tillåter samma tecken som "Klassprefix".