Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

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

Posted by sura1 - 3. März 2009

silver031Bookmark and Share

Link Styles mit CSS – Teil 2

linkstyles2

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
       demo2

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)

k-linkstyle2_video1

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)

linkstyle2_1

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

 1
/* adds background, underline */
    a.add-background-underline:hover {background: #ffdeeb;}
 2
/* adds background, no underline */
    a.add-background-no-underline {text-decoration: none;}
    a.add-background-no-underline:hover {background: #ffdeeb;}
 3
 /* adds background, removes underline */
    a.add-background-remove-underline:hover {background: #ffdeeb;
    text-decoration: none;}
 4
/* 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)

linkstyle2_2

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

 5
/* with background, changes color, underline */
    a.background-change-color-underline {background: #ffdeeb;}
    a.background-change-color-underline:hover {color: #ff0066;}
 61
/* 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;}
 71
/* 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;}
 8
/* 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

linkstyle2_3

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

 9
/* 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;}
 101
 /* 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
       demo2

Originalartikel:

gradient11

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

Eine Antwort to “Link Styles – Wie Sie mit CSS und ohne Einsatz von Grafiken Ihre Links formatieren – Teil 2”

  1. funkygog said

    Früher waren links immer unterstrichen. (Nicht schön, aber praktisch)
    Heute werden links oft nur farblich vom Text abgesetzt (Schöner)
    Dein Beitrag zeigt dafür ja viele Beispiele und dürfte somit besonders für Anfänger interessant sein, aber viele haben bestimmt hier auf
    „Ausführliche Informationen zum Thema:“ geklickt, da unterstrichen.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: