In einem Themes hat man neben den großen Grafiken (Header, Footer) oft eine Vielzahl von kleinen Grafiken (Icons) im Theme Ordner liegen.

Beispiel Navigation:
Will man statt der Zeichen « und »
html-Sonderzeichen = « und »
lieber Icons verwenden, so werden – falls ein Maus-Effekt beim Überfahren der Links gewünscht ist – schon vier Icons benötigt.

Diese vier Grafiken lassen sich aber als eine Grafik zusammenfassen.
Das schafft Ordnung im Theme und die Seite baut sich schneller auf.

zuvor:

  • nav-left.jpg | nav-left-hover.jpg
  • nav-right.jpg | nav-right-hover.jpg

nachher (ein Bild für alle Fälle):

  • navigation.jpg

Der Rest wird dann über Styling Angaben geregelt. Einfach gesagt: Der Bildausschnitt von „navigation.jpg“ wird immer passend verschoben.

Das ist zugegeben alles nichts neues. (siehe Frank Bültge von 2008)

Aber ich habe ein Online-Generator entdeckt der nicht nur die Bilder zusammenügt, sondern auch gleich die erforderlichen Styling Angaben liefert. Überaus praktisch!

Hier ein Beispiel welches ich mit css-Sprites erstellt habe:
folgende Bilder habe ich hochgeladen und zusammenügen lassen. In der rechten Spalte die dazu passenden Styling Angaben:

go-left.jpg
go-left-grey.jpg
go-right-grey.jpg
go-right.jpg
Ergebnis:
Ein Bild mit allen Icons
goto.png
die css-Angaben zum Gesamtbild

.go-left:hover {
background: #fff url(images/goto.png) no-repeat;
background-position: 0px 0px;
}
.go-left {
background: #fff url(images/goto.png) no-repeat;
background-position: 0px -53px;
}
.go-right:hover {
background: #fff url(images/goto.png) no-repeat;
background-position: 0px -106px;
}
.go-right {
background: #fff url(images/goto.png) no-repeat;
background-position: 0px -159px;
}

umgesetzt habe ich dieses Beispiel [hier]

Empfohlene Beiträge

Noch kein Kommentar, Füge deine Stimme unten hinzu!


Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht.