CSS-Sprites einfach erstellen

Der Begriff CSS-Sprites wird als Bezeichnung für Grafikdateien verwendet, welche aus kleinen Einzelgrafiken bestehen. Diese Sprites werden über CSS derart in Webseiten eingebunden, dass vom Webbrowser jeweils die benötigten entsprechend zugeschnittenen Teilgrafiken angezeigt werden.

Fährt man mit der Maus über die Grafik, wird für den Hovereffekt keine neue Grafik geladen, sondern nur die vorhandene Grafik verschoben.

CSS-Sprites werden dort benutzt, wo es um feste grafische Bestandteile geht. In der Navigation und bei sonstigen wiederkehrenden Seitenbestandteilen wie Logos, Linien, RSS-Icons und so weiter.

Vorteile:

Hovereffekte ohne Nachladen von Grafiken.
HTTP Abrufe werden verringert, Ladezeiten verkürzt.
Schnellere Hover-Effekte in Menüleisten - und das ohne JavaScript.
Änderungen müssen nur noch an einer Datei vorgenommen werden.

<style>
#grafik-link {
 text-decoration: none;
 display: block;
 background: url(sonne.png) no-repeat top left;
 background-position: 0 0; width: 112px; height: 111px;
}

#grafik-link:hover, #grafik-link:active {
 background-position: -162px 0; width: 112px; height: 111px;
}
</style>

 </head>
<body>

<a href="#" id="grafik-link">&nbsp;</a>

Verwendete Grafik: (zwei Grafiken in einer Grafik)

Navigation mit CSS-Sprites erstellen

Menüpunkt 1 Menüpunkt 2 Menüpunkt 3

<style>
.nav-link {
 text-decoration: none;
 display: block;
 color: #00a600;
 font-family: Verdana, Sans-Serif;
 font-size: 14px;
 font-weight: bold;
 padding: 5px;
 background: url(button.png) no-repeat top left;
 background-position: 0 0; width: 120px; height: 26px;
}

.nav-link:hover, #nav-link:active {
 color: #000000;
 background-position: 0 -76px; width: 120px; height: 26px;
}
</style>

 </head>
<body>

<a href="#" class="nav-link">Menüpunkt 1</a>
<a href="#" class="nav-link">Menüpunkt 2</a>
<a href="#" class="nav-link">Menüpunkt 3</a>

Verwendete Grafik:

css_sprites.zip

Tipps

Solche Sprite-Grafiken können Sie mit den folgenden Online-Generatoren erstellen:
CSS Sprites Generator und CSS Sprites.