CSS Links: Rahmeneffekte

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!

Oben und Unten
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:

An den Seiten

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>

This entry was posted in HTML Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *