CSS-Sprites online erstellen – Spritepad

spritepad-logo

Moderne Websites kommen um den Einsatz von CSS-Sprites nicht mehr herum. Um die Performance einer Seite zu verbessern, gehört die Technologie längst zu den Basics. Leider ist es zeitaufwändig und lästig eine Sprite zu erstellen: Zunächst müssen die gewünschten Grafiken auf der Arbeitsfläche positioniert werden, anschließend werden die Abmessungen und Koordinaten in das CSS-Dokument übernommen.
Spritepad vereinfacht (wie auch andere Tools) die Arbeit mit Sprites. Im Gegensatz zu allen anderen mir bekannten Online-Anwendungen funktioniert jedoch bei Spritepad alles genau so wie man es sich wünscht.

Beitrag zu Ende lesen

Einfachere CSS-Sprites mit ‘Sprite Cow’

spritecow-logo

Ich habe euch vor einiger Zeit einen Online Generator für CSS-Sprites vorgestellt der sowohl die grafische Sprite, als auch den entsprechenden CSS-Quellcode generiert. Heute möchte ich euch auf ein alternatives Tool aufmerksam machen, das bei mir einige Wochen ein Leben als ungenutztes Lesezeichen fristen musste. Zu unrecht wie sich gestern herausstellte.
Sprite Cow ist kein Online-Generator im eigentlichen Sinn - vielmehr erleichtert er die Arbeit mit Sprites ohne, dass einem die Arbeit komplett abgenommen wird. Und genau hier liegt in meinen Augen der entscheidende Vorteil.

Beitrag zu Ende lesen

Sprite-Generator Spritebox

spritebox-logo-icon

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.

Beitrag zu Ende lesen

CSS-Sprites: Der perfekte Überblick

css-image-icon

Als CSS-Sprites bezeichnet man eine CSS-Technik in der mehrere Grafiken (z.B. verschiedene Buttons und Zustände einer Navigation) in einer großen Grafik zusammengefasst werden. Im Idealfall alle Grafiken einer Seite, sofern dies möglich ist. Diese Technik bietet massive Vorteile die ich hier gar nicht alle aufzählen möchte.
Da ich mich in der Vergangenheit schon einige Male mit Webdesignern streiten (!) musste, die diese Technik als sinnlos oder zu kompliziert verurteilten, kommt jetzt hier der Link zum ultimativen Roundup zum Thema CSS-Sprites. Lesen, merken, anwenden!