Wekelijkse freebies: 12 gratis CSS Sprite-generatoren
Met CSS-afbeeldingssprites kunt u het aantal HTTP-verzoeken op een site drastisch verminderen door veel of alle afbeeldingen op uw site in één bestand te combineren. Dit bestand kan vervolgens worden gebruikt in combinatie met CSS-achtergrondpositionering om individuele afbeeldingen te implementeren.
Het nadeel van deze techniek is dat het een moeizaam, betrokken proces is waarbij je je afbeeldingen handmatig moet combineren en met de CSS moet spelen om elke afbeelding correct weer te geven. Gelukkig zijn er een aantal gratis online tools die dit proces volledig automatiseren. Vandaag hebben we een geweldige verzameling van twaalf van deze tools, elk met zijn eigen unieke kijk op het sprite-generatieproces. Of u nu een sprite wilt maken uit een map met afbeeldingen of een bestaande site wilt converteren, we hebben de tools om u te helpen de klus in een paar seconden te klaren.
CSS Sprite Generator: Project Fondue
Een goede generator met veel opties. Je uploadt een .ZIP van alle afbeeldingen die je in een sprite wilt laten veranderen en het doet de rest. Het spuugt een afbeelding en alle verschillende 'achtergrondpositie'-waarden uit die u nodig heeft.
CSS Sprites-generator
Lelijk en buggy, deze sprite-generator dwingt je om elke afbeelding afzonderlijk te uploaden. Probeer het uit om te zien wat u denkt, maar eerlijk gezegd staan er betere alternatieven op deze lijst.
CSS Sprites - Online CSS Sprite Builder / Generator
Deze is best leuk. U kunt eenvoudig een heleboel afbeeldingen tegelijk uploaden, uw outputbestandstype kiezen en zelfs kiezen om Sass- en CSS-code als resultaat te krijgen. Er zijn ook enkele handige opties voor het automatisch genereren van zweefeffecten zoals onverzadigd en omgedraaid. Over het algemeen heel indrukwekkend, zorg ervoor dat je het bekijkt.
Spritebox - Maak CSS van Sprite Images
Deze neemt een andere, iets minder geautomatiseerde route. In plaats van een sprite-afbeelding voor u te maken, kunt u hiermee uw reeds gemaakte sprite uploaden en specifieke gebieden definiëren om de resulterende CSS te genereren. Een geweldige tool als je liever sprites bouwt in Photoshop en gewoon hulp wilt bij de code.
Canvas: CSS Sprites Generator
Als je afbeeldingen voor deze uploadt, moet je het een voor een doen, wat een beetje vervelend is. Als je links hebt, kun je gewoon in een lijst met bijbehorende klassenamen plakken en je bent klaar om te gaan. Opties zijn onder meer opvulling en achtergrondkleuren. Het werkte goed tijdens mijn testen, zeker een kijkje waard.
Steken - Een HTML5-sprite-bladgenerator
Hiermee kun je afbeeldingen slepen, wat geweldig is na het gebruik van alle lastige unloaders die andere ontwikkelaars hebben bedacht. Daarna kunt u eenvoudig op één knop klikken om de afbeelding te krijgen en een andere om de CSS te pakken. Er zijn vrijwel geen opties en het werkt alleen in Chrome en Firefox, maar het is perfect als je gewoon een snelle en eenvoudige oplossing wilt.
Spritemapper
Deze is alleen voor super nerds, het is een downloadbare sprite-generator die je vanaf de opdrachtregel uitvoert. De implementatie is echter echt gelikt, u wijst het eenvoudig naar uw bestaande CSS-bestand en het doet de rest van het werk. Dit maakt het probleem van sprite-beheer op lange termijn een makkie, omdat je gewoon je originele css- en afbeeldingsbestanden kunt vasthouden en ze opnieuw kunt verwerken wanneer er een verandering is.
SpriteMe
SpriteMe is een geweldige tool waarmee je je typische ontwikkelingsproces volledig in tact kunt houden. Bouw gewoon uw pagina zoals u normaal zou doen met individuele afbeeldingen. Als je klaar bent, open je de pagina in een browser en klik je op de SpriteMe-bookmarklet. Dit pakt alle afbeeldingen op de pagina, creëert een sprite en genereert de CSS. Dit is vooral handig als u een spannende site converteert.
Spritefy
Spritefy is een andere optie waarmee je eenvoudig een aantal bestanden naar de browser kunt slepen om ze te verwerken. Net als bij Stitches zijn er echt geen opties, maar het is absoluut een supersnelle manier om aan de slag te gaan met sprites (alleen Chrome en Firefox).
CSS Sprite Generator
Deze heeft een paar onnodige stappen in het generatie- en installatieproces, dus het duurt een paar seconden langer dan de meeste andere alternatieven, maar het heeft een heleboel code-uitvoer inclusief zowel CSS als HTML, samen met verschillende fragmenten voor het toevoegen van elke afbeelding aan een div of span, links invoegen, etc.
SpriteMeister - Automatische CSS Sprite Generator
SpriteMeister lijkt veel op SpriteMe hierboven, alleen minder geautomatiseerd. In plaats van een bookmarklet te gebruiken, uploadt u handmatig elke afbeelding en uw huidige CSS-bestand en ontvangt u vervolgens een download met bijgewerkte code en één afbeelding.
Sprite Creator 2.0
Deze werkt net als Spritebox hierboven. U uploadt de sprite-afbeelding die u elders hebt gemaakt en gebruikt een eenvoudig selectieproces om automatisch de juiste CSS voor elke afbeelding te genereren.
Hou ervan? Deel het!
Als je genoten hebt van de verzameling freebies van deze week, deel dan de liefde en stuur een link naar je favoriete sites. Hier is een handig fragment dat u kunt kopiëren en plakken zoals u wilt!
12 gratis CSS Sprite-generatoren: http://goo.gl/NhLNR
