CSS Links: Rahmeneffekte

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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!


    [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>