CSS-Sprites einfach erstellen [IE|M|O|S|G]

von: Werner Zenk

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.

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.

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

Demo zum herunterladen: css_sprites.zip

Quelltext:

<style type="text/css">
#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 - 29,81 KB

Tipp: Solche Sprite-Grafiken können Sie mit dem » CSS Sprite Generator erstellen.

• Navigation mit CSS-Sprites erstellen

Demo:

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

Quelltext:

<style type="text/css">
.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,68 KB

Andere Bilder für eine Navigation finden Sie im großen » Multimedia-Archiv (Bereich: Buttons)

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Kommentare bei CSS-Anweisungen

CSS Hyperlink #32

CSS Hyperlink #27

Rahmen mit Bildlaufleiste

Scrollende Tabelle

Mit ::selection markierten Text hervorheben

CSS Grundkurs [Lektion 2]

CSS Hyperlink #39

CSS Hyperlink #29 …mehr