Ukentlig freebies: 12 gratis CSS Sprite-generatorer
CSS image sprites lar deg dramatisk redusere antall HTTP-forespørsler på et nettsted ved å kombinere mange eller alle bildene på nettstedet ditt til en enkelt fil. Denne filen kan deretter brukes sammen med CSS bakgrunnsposisjonering for å implementere individuelle bilder.
Ulempen med denne teknikken er at det er en møysommelig, involvert prosess som krever at du manuelt kombinerer bilder og fikler med CSS for å få hvert bilde til å vises riktig. Heldigvis er det en rekke gratis online verktøy som automatiserer denne prosessen fullstendig. I dag har vi en fantastisk samling av tolv av disse verktøyene, hver med sin egen unike ta på sprite-generasjonsprosessen. Enten du ønsker å lage en sprite fra en mappe med bilder eller konvertere et eksisterende nettsted, har vi verktøyene som hjelper deg med å få jobben gjort i løpet av sekunder.
CSS Sprite Generator: Project Fondue
En god generator med mange alternativer. Du laster opp et .ZIP av alle bildene du ønsker, blitt en sprite, og den tar vare på resten. Den piper ut et bilde og alle de forskjellige "bakgrunnsposisjon" verdiene du trenger.
CSS Sprites generator
Stygge og buggy, denne sprite-generatoren tvinger deg til å laste opp hvert bilde individuelt. Prøv det for å se hva du synes, men ærlig talt, det er bedre alternativer på denne listen.
CSS Sprites - Online CSS Sprite Builder / Generator
Denne er ganske fin. Du kan enkelt laste opp et knippe bilder på en gang, velge output-filtype og til og med velge å få Sass- og CSS-kode som et resultat. Det er også noen pene alternativer for automatisk å generere sveveeffekter som umettet og vendt. Generelt ganske imponerende, må du huske å sjekke det ut.
Spritebox - Lag CSS fra Sprite Images
Denne tar en annen, litt mindre automatisert rute. I stedet for å lage et sprite-bilde for deg, lar det deg laste opp din allerede opprettede sprite og definere spesifikke områder for å generere den resulterende CSS. Et flott verktøy hvis du foretrekker å bygge sprites i Photoshop og bare vil ha hjelp med koden.
Lerret: CSS Sprites Generator
Hvis du laster opp bilder for denne, må du gjøre det en om gangen, noe som er litt vondt. Hvis du har koblinger, kan du ganske enkelt lime inn en liste med tilhørende klassenavn, og du er god til å gå. Alternativene inkluderer polstring og bakgrunnsfarger. Det fungerte bra i testingen min, absolutt verdt en titt.
Stitches - En HTML5 sprite ark generator
Denne lar deg dra inn bilder, noe som er kjempebra etter å ha brukt alle de vanskelige losserne som andre utviklere har kommet frem til. Etter det kan du ganske enkelt klikke på en knapp for å få bildet og en annen for å ta tak i CSS. Det er praktisk talt ingen alternativer, og det fungerer bare i Chrome og Firefox, men det er perfekt hvis du bare vil ha en rask og enkel løsning.
Spritemapper
Denne er kun for supernerder, det er en nedlastbar sprite-generator som du kjører fra kommandolinjen. Implementeringen er virkelig glatt, du rett og slett peker den på din eksisterende CSS-fil, og den gjør resten av arbeidet. Dette gjør problemet med langvarig sprite-administrasjon til et smink, siden du bare kan henge på originale css- og bildefiler og behandle dem på nytt når det er endring.
SpriteMe
SpriteMe er et fantastisk verktøy som lar deg fullstendig holde den typiske utviklingsprosessen i takt. Bare bygg siden slik du normalt bruker individuelle bilder. Når du er ferdig, åpner du siden i en nettleser og trykker på SpriteMe-bokmerket. Dette tar tak i alle bildene på siden, lager en sprite og genererer CSS. Dette er spesielt nyttig hvis du konverterer et spennende nettsted.
Spritefy
Spritefy er et annet alternativ som lar deg bare dra en haug filer til nettleseren for å behandle dem. Som med Stitches er det virkelig ingen alternativer, men det er definitivt en super rask måte å komme i gang med sprites (bare Chrome og Firefox).
CSS Sprite Generator
Denne har noen unødvendige trinn i generasjons- og installasjonsprosessen, så det tar noen sekunder lenger enn de fleste av de andre alternativene, men den har massevis av kodeutdata som inkluderer både CSS og HTML sammen med forskjellige utdrag for å legge hvert bilde til en div eller span, sette inn lenker, etc.
SpriteMeister - Automatisk CSS Sprite Generator
SpriteMeister er mye som SpriteMe ovenfor, bare mindre automatisert. I stedet for å bruke et bokmerke, laster du opp hvert bilde og din nåværende CSS-fil manuelt og mottar deretter en nedlasting med oppdatert kode og et enkelt bilde.
Sprite Creator 2.0
Denne fungerer akkurat som Spritebox ovenfor. Du laster opp sprite-bildet som du opprettet andre steder, og bruker en enkel utvelgelsesprosess for automatisk å generere riktig CSS for hvert bilde.
Elsker det? Del det!
Hvis du likte denne ukens samling av freebies, del kjærligheten og send ut en lenke på favorittsidene dine. Her er et praktisk utdrag for deg å kopiere og lime inn som du vil!
12 gratis CSS Sprite-generatorer: http://goo.gl/NhLNR
