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"> </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:

120 x 102 Pixel
1.1 KB
Tipps
Solche Sprite-Grafiken können Sie mit den folgenden Online-Generatoren erstellen:
CSS Sprites Generator und
CSS Sprites.