Spazierende Links – Gestaltung von Hyperlinks mit CSS

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

Wie Sie mit CSS sogenannte

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:

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *