Link Styles – Wie Sie mit CSS und ohne Einsatz von Grafiken Ihre Links formatieren – Teil 2

Link Styles mit CSS – Teil 2

Sie surfen auf einer Webseite mit sehr viel Text und mehreren Links und haben dabei das Problem, dass diese nur sehr schlecht oder aber überhaupt nicht vom Text zu unterscheiden sind.

Ich stoße immer wieder auf Blogs und Webseiten, welche zum Beispiel die Hyperlinks farblich überhaupt nicht anders darstellen. Was folgt daraus? Ist der Inhalt auch noch so interessant – solch eine Webseite wird sehr schnell wieder verlassen..

Ich möchte Ihnen hier in einer 3-teiligen Serie zeigen, wie Sie ganz einfach und ohne Einsatz von Grafiken Ihre Links so formatieren, dass diese bereits auf den ersten Blick vom übrigen Text unterschieden werden können.

   Fertige Beispiele ansehen
       

Vorgangsweise:

Ich setze in meinen Beispielen so genannte Hover-Links ein. Das sind Links, die beim Drüberfahren mit der Maus ihre Farbe verändern. Von dieser Möglichkeit wird im Web rege Gebrauch gemacht. Ein Link kann bei Mausberührung die Unterstreichung verlieren oder bei nicht unterstrichenen Links sie annehmen, die Schrift kann vergrößert werden, fette oder kursive Buchstaben erscheinen und so weiter…..

Sehen Sie meine 10 fertigen Links im folgenden kurzen Video (30 Sekunden – 700 KB)

Link Styles mit CSS – Teil 2 (10 Beispiele)

Farbe der Links in den 10 Bespielen:

Grundfarbe: a {color: #0c7fce;}

Nummer 1 – 4

Hintergrundfarbe hinzufügen, Unterstreichung (hinzugeben, entfernen)

Nach der Mausberührung sehen die obigen 4 Links wie folgt aus:

 
/* adds background, underline */
    a.add-background-underline:hover {background: #ffdeeb;}

 
/* adds background, no underline */
    a.add-background-no-underline {text-decoration: none;}
    a.add-background-no-underline:hover {background: #ffdeeb;}

 
 /* adds background, removes underline */
    a.add-background-remove-underline:hover {background: #ffdeeb;
    text-decoration: none;}

 
/* adds background, adds underline */
    a.add-background-add-underline {text-decoration: none;}
    a.add-background-add-underline:hover {background: #ffdeeb;
    text-decoration: underline;}

Nummer 5 – 8

Hintergrundfarbe, Wechsel der Schriftfarbe und Unterstreichung (oder nicht)

Nach der Mausberührung sehen die Beispiele 5 bis 8 wie folgt aus:

 
/* with background, changes color, underline */
    a.background-change-color-underline {background: #ffdeeb;}
    a.background-change-color-underline:hover {color: #ff0066;}

 
/* with background, changes color, no underline */
    a.background-change-color-no-underline {background: #ffdeeb;
    text-decoration: none;}
    a.background-change-color-no-underline:hover {color: #ff0066;}

 
/* with background, changes color, removes underline */
    a.background-change-color-remove-underline {background: #ffdeeb;}
    a.background-change-color-remove-underline:hover {color: #ff0066;
    text-decoration: none;}

 
/* with background, changes color, adds underline */
    a.background-change-color-add-underline {background: #ffdeeb;
    text-decoration: none;}
    a.background-change-color-add-underline:hover {color: #ff0066;
    text-decoration: underline;}

Nummer 9 – 10

Wechsel Hintergrundfarbe, keine Unterstreichung

Fahren Sie mit der Maus über die beiden Links und Sie sehen folgendes Ergebnis:

 
/* changes background, no underline */
    a.change-background-no-underline {padding: 2px; background: #ffe300;
    color: #000;  text-decoration: none;}
    a.change-background-no-underline:hover {background: #ff0066;}

 
 /* changes background, no underline */
    a.change-background-no-underline-bold {padding: 2px; background: #ffe300;
    color: #000; font-weight: 700; text-decoration: none;}
    a.change-background-no-underline-bold:hover {background: #ff0066;}

   Fertige Beispiele ansehen
       

Originalartikel:

Ausführliche Informationen zum Thema:

http://de.selfhtml.org/html/verweise/definieren.htm#gestalten
http://de.selfhtml.org/html/verweise/anzeige/a_href_css.htm
http://www.css4you.de/hover.html
http://www.css4you.de/example/hover.html

Ähnliche Artikel: 
Link Styles Teil 1 - Wie Sie mit CSS und ohne Einsatz von Grafiken Ihre Links formatiern
Formatierung von Überschriften mit CSS (Teil 2)
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen
Abgerundete Ecken, Balkendiagramm mittels CSS
Bilder im Fließtext
Bildunterschriften in XHTML
XHTML/CSS-Übungen: Formulare
Lesehilfe gestalten mit CSS
Formatierung von Überschriften mit CSS
CSS-Übung: Initial gestalten (DropCap)
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen