CSS Sprites

Juli 16, 2008 |

Die CSS Sprites Technik ist keine Neuerfindung, da es schon zu den alten “Super Mario Brothers Nintendo Zeiten” verwendet wurde. Grössere Webseiten nutzen die Technik um die Ladezeiten zu verringern. Wenn man z.b. Tonnen von JavaScript für Werbung, Tracking und andere Sachen laden muss, versucht man an jeder Ecke zu optimieren. Auch wenn die Ladezeiten nur milisekunden dauern summiert es sich wenn eine Seite ca. 30 Bilder laden muss. Genau da kommen die Sprites zum Einsatz. Es wird versucht auf einer Datei möglichst viele Grafiken unterzubringen und diese danach per CSS zu positionieren ohne das der Anwender etwas davon mitkriegt.

In diesem Artikel werde ich diese unten abgebildete Yahoo-Buttons-Navigation nachbauen und somit versuche die Technik zu erklären:

Hierfür werde ich diese eine Grafik verwenden.

Und jetzt erstmal das HTML. Es wird eine einfache ungeordnete Liste mit 5 Unterpunkten erstellt. Jedes LI Element erhält eine eigene Klasse um nachhher per CSS die Positionierung der entsprechenden Grafik zuordnen zu können. 

<ul id="simple-sprite">
  <li class="mail"><a href="#">Mail</a></li>
  <li class="messanger"><a href="#">Messanger</a></li>
  <li class="radio"><a href="#">Radio</a></li>
  <li class="wetter"><a href="#">Wetter</a></li>
  <li class="lokales"><a href="#">Lokales</a></li>
  <li class="horoskop"><a href="#">Horoskop</a></li>
</ul>

Gefolgt vom CSS, im welchem ich zuerst die Liste style.

ul#simple-sprite {
    list-style-type: none;
    float: left;
    width: 370px;
    font-family: Verdana ,Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}
 
ul#simple-sprite li {
    width: 115px;
    height: 35px;
    display: block;
    float:left;
    margin: 0 5px 5px 0;
    background: #FFF;
    border: 1px solid #B9C0C6;
}

Jetzt bekommt die Klasse “ul#simple-sprite li a” das Sprite als Hintergrund, um es danach mit “background-position” den einzelnen Buttons zuzurodnen:

ul#simple-sprite li a {
    display: block;
    color: #193777;
    background: #fff url(images/sprite_example.jpg) no-repeat top left; /* Sprite */
    padding: 10px 10px 10px 35px;
}
 
/* Und hier die einzelnen Buttons */
 
ul#simple-sprite li.mail a {
    background-position: 5px 10px; 
}
 
ul#simple-sprite li.messanger a {
    background-position: 5px -45px; 
}
 
ul#simple-sprite li.radio a {
    background-position: 5px -95px;	 
}
 
ul#simple-sprite li.wetter a {
    background-position: 5px -145px; 
}
 
ul#simple-sprite li.lokales a {
    background-position: 5px -195px;	 
}
 
ul#simple-sprite li.horoskop a {
    background-position: 5px -248px; 
}

Und fertig:

Interessante Links zum Thema Sprites:
CSS Sprites Quellensammlung (Dr.Web)

  • Delicious
  • Facebook
  • FriendFeed
  • Mister-Wong
  • Netvibes Share
  • Twitter
  • YiGG
  • Share/Bookmark