kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Sprite-Generator Spritebox

CSS-Sprites sind für moderne Websites ein absolutes Must-Have. Eine Sprite fasst verschiedene grafische Seitenelemente in einer Datei zusammen um somit unter anderem die Ladezeit der Website zu beschleunigen. Mittels CSS-background-Eigenschaft wird anschließend verschiedenen Elementen die selbe Grafik zugewiesen; die Position innerhalb der Grafik erfolgt über die Koordinaten der background-position-Eigenschaft. Je größer die Sprite wird, desto lästiger ist es die Koordinaten abzumessen und anschließend auf das Stylesheet zu übertragen.
Der kostenlose Online-Dienst Spritebox erleichtert diese Aufgabe enorm.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

Spritebox ermöglicht es Euch in einer hochgeladenen Grafik frei wählbare Bereiche zu markieren und zu bennen. So können alle Elemente der Sprite bestimmt werden. Wenn die Markierung abgeschlossen ist, wird der CSS-Code der Sprite direkt exportiert und kann verwendet werden. In meinen Tests hat das Tool großartig funktioniert. Wie es sich bei mir im alltäglichen Workflow schlägt muss sich zeigen.

css-sprite-generator

Wie arbeitet Ihr mit Sprites? Nutzt Ihr bereits einen Generator oder messt Ihr in Photoshop oder Fireworks alles von Hand aus? Oder sind bei Euren Projekten etwa gar keine Sprites im Einsatz?

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Kevin

    Verfasst am 11. Januar 2011 um 16:46 Uhr.

    Also ich bin ja erst durch dein Buch WordPress Themes auf Sprites aufmerksam geworden. Ich stehe denen aber noch skeptisch gegenüber, es reduziert zwar die Ladezeit aber wenn eine Grafik größer wird müssen alle Koordinaten geändert werden.

    Außerdem fand ich das Herstellen also abmessen sehr aufwändig, zur Zeit setze ich also noch keine ein. Das Tool gucke ich mir mal an vielleicht ändere ich meine Meinung dann.

    lg
    Kevin

  2. Kevin

    Verfasst am 11. Januar 2011 um 16:51 Uhr.

    Das Tool ist wirklich toll, allerdings ist es nur bei Sprites gut zubenutzen wo die Grafiken weit auseinander sind, bei welchen wo fast kein leerraum dazwischen ist wird es schwirieg.

  3. Advitum Webdesign

    Verfasst am 4. Februar 2011 um 20:52 Uhr.

    Also ich mache bei Sprites immer alles selber, vom Zusammensetzen bis zum Einbinden in CSS. Meiner Meinung nach ist das nicht so viel Aufwand, dass ich dafür ein Tool bräuchte. Wenn man sehr viel mit Sprites arbeitet, ist es aber bestimmt sehr nützlich, nicht alles selbst machen zu müssen.

  4. MoMent

    Verfasst am 27. Juni 2011 um 9:34 Uhr.

    Ich habe jetzt meine ersten Sprites selber gemacht. Und wenn man die Grafiken gleich im Raster anordnet … ergibt sich die Vermaßung ja fast von selbst.
    Darf ich eine andere Frage zu Sprites stellen: In Firefox entsteht bei mir um die Boxen beim Zurückkommen ein störender Rahmen, ganz grauslig bei text-indent -9999px. Wie bekommst du den optisch weg? Soweit ich hörte dient der Rahmen dem Focus und ist für Barrierefreiheit nötig? So dass ich jetzt nicht einfach a { outline: none; } einsetzen möchte. Oder doch?
    Bitte verrate mal Deinen Trick.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.