CSS-Sprites mit Generator erstellen

Eine Technik um die Anzahl von HTTP-Anfragen (HTTPRequests) klein zu halten, ist es kleine Hintergrundgrafiken wie beispielsweise Icons zusammen in eine einzige Grafikdatei zu packen.

Der Vorteil: Die Grafik braucht nur einmal geladen zu werden und erfordert bestenfalls nur eine HTTP-Anfrage.

Der jeweils erforderliche Bildausschnitt wird dann mittels Cascading Style Sheets (CSS) passend positioniert.

Eine Arbeitserleichterung hierfür ist der Webdienst CSS Sprites Generator. Er hat zwar noch Alpha-Status, befindet sich also noch in der Entwicklung, aber war mir schon eine große Hilfe. Zum einem konnte ich damit – ohne ein Grafikprogramm zu bemühen – die Icons der Bookmark Dienste automatisch zu einer einzigen Hintergrundgrafik generiert bekommen. Zum anderen bekam ich auch noch gleich die erforderlichen Positionierungsangaben für die CSS-Datei mitgeliefert. Sehr praktisch! :-)

Das Ergebnis kannst konntest Du bei den Icons unter Seite bookmarken bewundern (Nachtrag: Zwischenzeitlich habe ich das in „Seite sichern bei“ umbenannt und die Hintergrundgrafiken durch Textlinks ersetzt, damit auch bei deaktiviertem CSS die Links zugänglich sind). Die dortigen Icons sind alle in der einen Datei sprite.png enthalten.

Der Transparenzeffekt beim Bewegen des Mauszeigers (Cursors) über die Icons ist war übrigens auch mittels CSS realisiert. Hier kommt kam die CSS-Eigenschaft opacity zum Einsatz.

Einen weiteren Generator für CSSSprites gibt es übrigens unter de.spritegen.website-performance.org/.

Nachtrag vom 31. August 2009

Heute wurde ich über einen Tweet vom Smashing Magazine bei Twitter auf einen weiteren Generator für CSS-Sprites aufmerksam: http://css-sprit.es/

Nachtrag vom 3. August 2014

Die Website des weiteren Generators css-sprit.es konnte ich nicht mehr aufrufen und deshalb habe ich den Link entfernt.

0 Kommentare und 1 Trackback/Pingback

  1. 1. Rückblick: WordCamp 2010 | Webseiten-Infos.de

    Pingback vom 3. Dezember 2011 um 07:34

    […] CSS-Sprites mit Generator erstellen […]

Kommentar schreiben (Datenschutzerklärung)

Kommentarformular





Erstkommentare und Kommentare mit Links werden moderiert.

Übersicht der Tastaturkürzel für Smilies

Abonnieren ohne einen Kommentar abzugeben

 

Durch die weitere Nutzung der Seite stimmst Du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen