Hovereffekte mit CSS-Sprites einfach und leicht erklärt

Vor längerer Zeit gab es bei A List Apart einen ausführlichen Artikel zum Thema CSS-Sprites zu lesen. Diese Technik nutzt eine einzelne Grafik, auf der mehrere oder gar alle benötigten Bilder einer Seite untergebracht sind. Durch unterschiedliche Positionierung des Bildes im Background des jeweiligen Elements via CSS können dann die Pseudoklassen wie :hover mit unterschiedlichen Bildern versehen werden.

Ausführliche und genaue Infos zu CSS-Sprites:
Webkrauts: Hovereffekte mit CSS-Sprites/
CSS Tricks.com: CSS-Sprites – What They Are, Why They`re Cool And How To Use Them
bueltge.de: CSS-Sprites einfach erklaert
CSS Guru: CSS Sprites

Ich möchte Ihnen hier in meinem Artikel 4 verschiedene Beispiele zeigen, wie Sie mit dieser Technik z.B. CSS-Menüs erstellen, horizontale Buttons formatieren oder aber Bildabschnitte explizit darstellen können.

Beispiel 1 (2 vertikale Menüs):

   Eingesetzte Grafiken:
   [sprite.png]                   [nav_orange.png]
 

Ergebnis: Vertikale Menüs 1a + 1b [ansehen: Grafik anklicken!]

   Fertiges Beispiel: Zip_Datei (45 KB)

Wenn Sie möchten, tauschen Sie im Beispiel 1b die orange Grafik gegen eine andere Farbe aus. Laden Sie dazu die folgende Zip-Datei herunter (23 verschiedene Farben – 32 KB): Bitte Grafik anklicken!!

Beispiel 2 (2 vertikale Menüs):

   Eingesetzte Grafiken:
   [nav.jpg]

   [nav.gif]

Ergebnis: Vertikale Menüs 2a + 2b [ansehen: Grafik anklicken!]

   Fertiges Beispiel: Zip_Datei (20 KB)

Beispiel 3: horizontale Buttons

   Eingesetzte Grafik:
   [icons.gif]

Ergebnis: horizontale Buttons[ansehen: Grafik anklicken!]

   Fertiges Beispiel: Zip_Datei (14 KB)

Beispiel 4: Bildabschnitte kennzeichnen

   Eingesetzte Grafik:
   [test-3.jpg]

Ergebnis: Bildabschnitte kennzeichnen [ansehen: Grafik anklicken!]

   Fertiges Beispiel: Zip_Datei (63 KB)

[Download aller 4 Beispiele in einer Zip-Datei (141 KB) – Bitte Grafik anklicken!]

Tipp: Unter spritegen.website-performance.org gibt es einen CSS-Sprite-Generator, der die Erstellung von Sprites stark vereinfacht.

Ähnliche Artikel:
Super simple css bars – einfache Diagramme mit CSS erstellen
Pure CSS Animated Progress Bar – Animierter Fortschrittsbalken
Flexible CSS-Buttons mit 3 Hintergrund-Grafiken
CSS-Beispiel: Gestaltung einer Zebratabelle mit CSS
Top 10 CSS Table Designs aus Smashing Magazine
Bildeffekte mit CSS-Eigenschaft “background-attachment:fixed”
CSS-Tipps und Tricks: Abschnitte wie mit einem Textmarker markieren
Vertikal ausdehnbare CSS Note Box – Vertically Expandable CSS Note Box
Tricks mit CSS-Rahmen von Chris Coyier