Wie Sie mit CSS sogenannte “Spazierende Links” erstellen können

Die Gestaltung von Hyperlinks mit CSS ist ein sehr beliebtes Thema. Diese werden im Quelltext mit dem Element a markiert. Mit CSS können Sie Hyperlinks völlig neue Gestaltungen mit ins Web geben, zum Beispiel die Unterstreichung der Links entfernen oder dem Link eine andere Farbe verpassen.

Ich möchte Ihnen heute hier in meinem Artikel zeigen, wie Sie einen Link in einen sogenannten ‘Spazierenden Link = Walking Link’ verwandeln können.

Als Grundlage für dieses kleine Tutorial dient mir dazu folgender Originalartikel: CSS-Tricks.com – How To Make Walking Links

CSS-Formatierung des “Spazierenden Hyperlinks”

Ein “spazierender Link” ist in meinem Beispiel ein Link, welcher mit Hilfe einer Hintergrund-Grafik ([background: url(images/dot.gif)]) eine gepunktete Unterstreichung besitzt. In der CSS Pseudo-Klasse a:hover (wenn Sie mit der Maus über den Link fahren) und bei einem aktivierten Link (a:active) wird die ursprüngliche Grafik durch einen animierten Hintergrund ([background: url(images/dotwalk.gif)]) ersetzt. Dadurch entsteht der Effekt, als ob die Punkte in der Link-Unterstreichung zu „wandern beginnen“ würden.

Die CSS-Formatierung dazu sieht wie folgt aus:

a, a:visited {
   background: url(images/dot.gif) repeat-x center bottom;
   text-decoration: none;
   padding-bottom: 2px;
   color: #900;
   }
   a:hover, a:active {
      background: url(images/dotwalk.gif) repeat-x center bottom;
   }

Fertiges Beispiel ansehen: hier

Kurzes Demovideo ansehen:

Ähnliche Artikel:

1. 5 schöne Beispiele für die Formatierung von Blockqoute mit CSS
2. Wie Sie mit CSS ungeordnete Listen formatieren
3. CSS für Anfänger: Bilderrahmen um Grafiken mit CSS
4. CSS für Anfänger: Listen mit grafischen Aufzählungszeichen
5. CSS-Tip: Doppelte Rahmen um div-Boxen erstellen