Kategorien
Design HTML/CSS

Villa Kunterbunt

Farbmonitore wurden erfunden, damit man bunte Seiten ansehen kann. Wer will, kann auch Hyperlinks in allen Farben erglühen lassen. Das Interessante: Jeder Link „hovert“ in seinen eigenen Farben. Das nennt man dann nicht einfach bunt, sondern kunterbunt. Dazu…

Farbmonitore wurden erfunden, damit man bunte Seiten ansehen kann. Wer will, kann auch Hyperlinks in allen Farben erglühen lassen. Das Interessante: Jeder Link „hovert“ in seinen eigenen Farben. Das nennt man dann nicht einfach bunt, sondern kunterbunt.

Dazu werden Style-Befehle benötigt, die Farben und Links miteinander verbinden. Die lassen sich in den Dateikopf schreiben oder als externes Stylesheet einbinden.

 <style>

A.blue:link { color: blue ; text-decoration:underline; }
 A.blue:visited {
color:blue; text-decoration:underline; }
 A.blue:active { color: red; text-decoration:underline;
}
 A.blue:hover { color: magenta; text-decoration:underline; }
      A.green:link
{ color: green ; text-decoration:underline; }
 A.green:visited { color:green;
text-decoration:underline; }
 A.green:active { color: red; text-decoration:underline;
}
 A.green:hover { color: red; text-decoration:underline; }
 </style>

Nach dieser Definition werden in die Links entsprechende Klassen eingefügt:

      <a
class="blue" href="#">Navigation</a><br>

<a class="green" href="#">Hyperlink</a><br>

Die Online Demo zeigt, was dabei herauskommt. Der eigenen Kreativität sind hier keine Grenzen gesetzt. Denkbar ist beispielsweise, allen Links, die zu einer Gruppe gehören, gleiche Farben – und unterschiedlichen Gruppen jeweils andere Farben zuzuweisen.

Schreibe einen Kommentar

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