Sie können ihre CSS Links auch mit Rahmeneffekten ausstatten. Hier ein paar Beispiele...
CSS und Linkdesign, das passt einfach gut zusammen. Es gibt immer neue Ideen, und Möglichkeiten!
[Blockierte Grafik: http://www.123computerhilfe.de/bilder/css_links_4_1.gif]
Oben und Unten
Der CSS Code ist nicht sonderlich kompliziert...
<style type="text/css">
a:link {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:active {color:#000000; text-decoration:none}
a:hover {color:#000000; border-top:dashed 2px red; border-bottom:dashed 2px green}
</style>
Die Angaben bei der CSS Pseudoklasse :hover sind für den Effekt "verantwortlich". Mit "border-top" wird der obere Rahmen definiert, mit "border-bottom" der untere. Die Angabe der Eigenschaften sieht so aus:
dashed 2px red
Rahmentyp Dicke Farbe
Ein weiteres Beispiel sieht z.B. so aus:
[Blockierte Grafik: http://www.123computerhilfe.de/bilder/css_links_4_2.gif]
An den Seiten
Der Code hierfür:
<style type="text/css">
a:link {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:active {color:#000000; text-decoration:none}
a:hover {color:#000000; border-left:solid 2px red; border-right:solid 2px green}
</style>
CSS und Linkdesign, das passt einfach gut zusammen. Es gibt immer neue Ideen, und Möglichkeiten!
[Blockierte Grafik: http://www.123computerhilfe.de/bilder/css_links_4_1.gif]
Oben und Unten
Der CSS Code ist nicht sonderlich kompliziert...
<style type="text/css">
a:link {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:active {color:#000000; text-decoration:none}
a:hover {color:#000000; border-top:dashed 2px red; border-bottom:dashed 2px green}
</style>
Die Angaben bei der CSS Pseudoklasse :hover sind für den Effekt "verantwortlich". Mit "border-top" wird der obere Rahmen definiert, mit "border-bottom" der untere. Die Angabe der Eigenschaften sieht so aus:
dashed 2px red
Rahmentyp Dicke Farbe
Ein weiteres Beispiel sieht z.B. so aus:
[Blockierte Grafik: http://www.123computerhilfe.de/bilder/css_links_4_2.gif]
An den Seiten
Der Code hierfür:
<style type="text/css">
a:link {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:active {color:#000000; text-decoration:none}
a:hover {color:#000000; border-left:solid 2px red; border-right:solid 2px green}
</style>