Wöchentliche Werbegeschenke: 12 kostenlose CSS-Sprite-Generatoren
Mit CSS-Image-Sprites können Sie die Anzahl der HTTP-Anforderungen auf einer Site drastisch reduzieren, indem Sie viele oder alle Images auf Ihrer Site in einer einzigen Datei kombinieren. Diese Datei kann dann in Verbindung mit der CSS-Hintergrundpositionierung verwendet werden, um einzelne Bilder zu implementieren.
Der Nachteil dieser Technik ist, dass es sich um einen sorgfältigen und aufwändigen Prozess handelt, bei dem Sie Ihre Bilder manuell kombinieren und mit dem CSS herumspielen müssen, damit jedes Bild richtig angezeigt wird. Glücklicherweise gibt es eine Reihe kostenloser Online-Tools, die diesen Prozess vollständig automatisieren. Heute haben wir eine beeindruckende Sammlung von zwölf dieser Tools, von denen jedes seine eigene Sicht auf den Sprite-Generierungsprozess hat. Egal, ob Sie ein Sprite aus einem Ordner mit Bildern erstellen oder eine vorhandene Site konvertieren möchten, wir haben die Tools, mit denen Sie Ihre Arbeit in Sekundenschnelle erledigen können.
CSS Sprite Generator: Projektfondue
Ein guter Generator mit vielen Optionen. Sie laden eine .ZIP-Datei aller Bilder hoch, die Sie in ein Sprite verwandeln möchten, und erledigt den Rest. Es spuckt ein Bild und alle verschiedenen Werte für die Hintergrundposition aus, die Sie benötigen.
CSS Sprites Generator
Dieser Sprite-Generator ist hässlich und fehlerhaft und zwingt Sie, jedes Bild einzeln hochzuladen. Probieren Sie es aus, um zu sehen, was Sie denken, aber ehrlich gesagt gibt es auf dieser Liste bessere Alternativen.
CSS Sprites - Online CSS Sprite Builder / Generator
Dieser ist ziemlich nett. Sie können ganz einfach eine Reihe von Bildern gleichzeitig hochladen, Ihren Ausgabedateityp auswählen und als Ergebnis entweder Sass- oder CSS-Code abrufen. Es gibt auch einige nette Optionen zum automatischen Generieren von Hover-Effekten wie entsättigt und gespiegelt. Insgesamt ziemlich beeindruckend, sehen Sie es sich an.
Spritebox - Erstellen Sie CSS aus Sprite-Bildern
Dieser nimmt eine andere, etwas weniger automatisierte Route. Anstatt ein Sprite-Image für Sie zu erstellen, können Sie Ihr bereits erstelltes Sprite hochladen und bestimmte Bereiche definieren, um das resultierende CSS zu generieren. Ein großartiges Tool, wenn Sie Sprites lieber in Photoshop erstellen und nur Hilfe beim Code benötigen.
Canvas: CSS Sprites Generator
Wenn Sie Bilder für dieses Bild hochladen, müssen Sie dies einzeln tun, was ein bisschen schmerzhaft ist. Wenn Sie jedoch Links haben, können Sie diese einfach in eine Liste mit den entsprechenden Klassennamen einfügen, und schon kann es losgehen. Zu den Optionen gehören Polsterung und Hintergrundfarben. Bei meinen Tests hat es gut funktioniert, auf jeden Fall einen Blick wert.
Stiche - Ein HTML5-Sprite-Sheet-Generator
Mit diesem können Sie Bilder ziehen, was fantastisch ist, nachdem Sie alle umständlichen Entlader verwendet haben, die andere Entwickler entwickelt haben. Danach können Sie einfach auf eine Schaltfläche klicken, um das Bild zu erhalten, und auf eine andere, um das CSS abzurufen. Es gibt praktisch keine Optionen und es funktioniert nur in Chrome und Firefox, aber es ist perfekt, wenn Sie nur eine schnelle und einfache Lösung wünschen.
Spritemapper
Dieser ist nur für Super-Nerds, es ist ein herunterladbarer Sprite-Generator, den Sie über die Befehlszeile ausführen. Die Implementierung ist jedoch sehr raffiniert. Sie zeigen einfach auf Ihre vorhandene CSS-Datei und erledigen den Rest der Arbeit. Dies macht das Problem der langfristigen Sprite-Verwaltung zum Kinderspiel, da Sie einfach an Ihren ursprünglichen CSS- und Image-Dateien festhalten und diese bei Änderungen erneut verarbeiten können.
SpriteMe
SpriteMe ist ein großartiges Tool, mit dem Sie Ihren typischen Entwicklungsprozess vollständig im Griff behalten können. Erstellen Sie Ihre Seite einfach so, wie Sie es normalerweise mit einzelnen Bildern tun würden. Wenn Sie fertig sind, öffnen Sie die Seite in einem Browser und klicken Sie auf das SpriteMe-Lesezeichen. Dadurch werden alle Bilder auf der Seite erfasst, ein Sprite erstellt und das CSS generiert. Dies ist besonders nützlich, wenn Sie eine vorhandene Site konvertieren.
Spritefy
Spritefy ist eine weitere Option, mit der Sie einfach eine Reihe von Dateien in den Browser ziehen können, um sie zu verarbeiten. Wie bei Stitches gibt es wirklich keine Optionen, aber es ist definitiv eine superschnelle Möglichkeit, mit Sprites zu arbeiten (nur Chrome und Firefox).
CSS Sprite Generator
Dieser hat ein paar unnötige Schritte beim Generieren und Einrichten, so dass er einige Sekunden länger dauert als die meisten anderen Alternativen, aber er hat eine Menge Code-Ausgabe, einschließlich CSS und HTML, zusammen mit verschiedenen Ausschnitten zum Hinzufügen jedes Bildes ein div oder span, Einfügen von Links usw.
SpriteMeister - Automatischer CSS-Sprite-Generator
SpriteMeister ist SpriteMe sehr ähnlich, nur weniger automatisiert. Anstatt ein Lesezeichen zu verwenden, laden Sie jedes Bild und Ihre aktuelle CSS-Datei manuell hoch und erhalten dann einen Download mit aktualisiertem Code und einem einzelnen Bild.
Sprite Creator 2.0
Dieser funktioniert genau wie Spritebox oben. Sie laden das an anderer Stelle erstellte Sprite-Bild hoch und generieren mithilfe eines einfachen Auswahlverfahrens automatisch das entsprechende CSS für jedes Bild.
Liebe es? Teilt es!
Wenn Ihnen die Werbegeschenksammlung dieser Woche gefallen hat, teilen Sie die Liebe und senden Sie einen Link auf Ihre Lieblingsseiten. Hier ist ein praktischer Ausschnitt, den Sie nach Belieben kopieren und einfügen können!
12 kostenlose CSS-Sprite-Generatoren: http://goo.gl/NhLNR
