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:

<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)

sonne.png - 274 x 111 Pixel - 30.5 KB

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:

button.png
120 x 102 Pixel
1.1 KB

Herunterladen: css_sprites.zip

Tipps

Solche Sprite-Grafiken können Sie mit den folgenden Online-Generatoren erstellen:
CSS Sprites Generator, CSS Sprites, Retina CSS Sprite Generator und Sprites Generator (Windows Programm).