Icons zusammenfügen als eine Grafik (css Sprites)

Kategorie: WordPress-Tipps | Share: funkygog       

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]




Einen Kommentar hinterlassen

*=erforderliche Angaben

Innerhalb der Kategorie: WordPress-Tipps