CSS Sprites

vorige Präsentation: Wichtige Properties | zurück zum Buch-Kapitel [esc] | Nächste Präsentation CSS Selektoren

CSS-Sprites

Das Laden von vielen kleinen Icons über HTTP 1.1 kann sehr lange dauern. Wenn man alle Bilder in ein Bild vereinigt muss nur noch eine Datei geladen werden. Das ist die Idee von CSS-Sprites.

Abbildung 42: CSS Sprites von Yahoo

So könnte der CSS Code aussehen:

.icon{
  display:block;
  padding:8px 0 9px 40px;
  background:url(http://us.i1.yimg.com/pa-icons2.gif) 5px 3px no-repeat;
}
#messenger .icon{
  padding-left:31px;
  background-position:2px -497px;
}
#music .icon{
  background-position:5px -197px;
}

CSS Sprites

vorige Präsentation: Wichtige Properties | zurück zum Buch-Kapitel [esc] | Nächste Präsentation CSS Selektoren

/

#