Designer Links

Wie ist das gemacht?

Ganz einfach, wie der Quellcode zeigt.

a:link {
color:black;
text-decoration:none;
font-weight:bold;
}
a:visited {
color:gray;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
border-bottom:3px dotted blue;
font-weight:bold;
}

"text-decoration" ist auf "none" gestellt, d.h. der Link wird nicht unterstrichen, aber wenn die Maus über dem Link ist wird mit Hilfe von "border-bottom" eine gestrichelte Linie angezeigt, die natürlich jede Farbe annehmen kann. Möglich sind alle Borderformatierungen, die hier aufgeführt sind.

Wie ist das gemacht?

Auch ganz einfach, wie der Quellcode zeigt.

a:link {
color:black;
text-decoration:underline;
font-weight:bold;
}
a:visited {
color:gray;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:underline;
border-bottom:1px solid blue;
font-weight:bold;
padding-bottom:2px;
}

"text-decoration" ist auf "underline" gestellt, d.h. der Link wird unterstrichen, und erhält bei Mausberührung noch eine weitere anderfarbige Unterstreichung wieder mit Hilfe von "border-bottom", allerdings diesmal als ganze ("solid") Linie.

Wie ist das gemacht?

Das ist schon etwas komplizierter. Als erstes kann man eine Tabelle erstellen, die die Links aufnehmen soll. Eine Alternative dazu sind Listen oder eine Formatierung mit Hilfe von "display:block;", wie in diesem Beispiel.

.m {
width:200px;
text-align:center;
border:1px solid gray;
padding:5px;
margin-left:150px;
}

Im zweiten Schritt werden dann die Pseudoklassen formatiert.

a:link {
-moz-border-radius:10px; /* abgerundete Ecken für die Gecko Browser */
border-top:1px solid #cccccc;
border-right:1px solid #666666;
border-bottom:1px solid #666666;
border-left:1px solid #cccccc;
color:white;
background-color:#999999;
padding:6px;
text-decoration:none;
display:block;
margin-bottom:5px;
}

a:visited {
-moz-border-radius:10px; /* abgerundete Ecken für die Gecko Browser */
border-top:1px solid #666666;
border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;
border-left:1px solid #666666;
color:gray;
padding:6px;
display:block;
background-color:#999999;
margin-bottom:5px;
text-decoration:none;
}

a:hover {
-moz-border-radius:10px; /* abgerundete Ecken für die Gecko Browser */
border-top:1px solid #666666;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #666666;
padding:6px;
margin-bottom:5px;
color:red;
display:block;
background-color:#999999;
text-decoration:none;
}

Der Effekt, das die Buttons gedrückt (bzw. nicht gedrückt) erscheinen, wird durch die Borderlinien erreicht, alles andere bestimmt der Innen- (padding) oder Außen- (margin)abstand. Anderes als bei den beiden vorhergehenden Beispielen haben ältere Browser Schwierigkeiten mit dieser Darstellung, insbesondere der NN 4.x macht bei padding und margin Probleme. Er sollte vom Stylesheet ausgeschlossen werden und nur die einfachen, weitgehend unformatierten Links anzeigen.

Der Netscape zeigt aber hier, dass er mit bestimmten Styles und auch der Positionierung von Ebenen sehr wohl etwas anfangen kann.

Wie ist das gemacht?

Der Quellcode ist fast derselbe, wie im Beispiel 1.

a:link {
color:black;
text-decoration:none;
font-weight:bold;
}
a:visited {
color:gray;
text-decoration:none;
}
a:hover {
color:yellow;
text-decoration:none;
font-weight:bold;
}
#no {
display:none;
}
a:visited #no {
display:none;
}
a:hover #no {
display:inline;
}

Was dazukommt ist eine Formatierung innerhalb des Links, die die Hoverangaben variiert. Ein Teil des Links wird mit id="no" ausgeschlossen, so dass sich die CSS Formatierung nur auf den Rest auswirkt. Damit kann man schöne Effekte erzielen.

zurück