Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

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

Posted by sura1 - 24. Februar 2009

februar_24
Bookmark and Share

Link Styles mit CSS – Teil 1

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 Blogbetreiber, welche zum Beispiel die Hyperlinks überhaupt nicht farblich anders darstellen. Was folgt daraus? Ist der Inhalt auch noch so interessant – so eine Webseite wird auf der Stelle 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.

link_styles_1

[Fertige Beispiele ansehen:  Grafik anklicken!]

Sehen Sie dazu auch folgendes Video:

linkstyles1_video

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…..

Farbe der Links in den 6 Beispielen:

Grundfarbe: a {color: #0c7fce;}

a) Unterstreichung entfernen:

 removes_underline
/* removes underline */
    a.remove-underline:hover {text-decoration: none;}

b) Unterstreichung hinzufügen:

 adds_underlinde
/* add underline */
    a.add-underline {text-decoration: none;}
    a.add-underline:hover {text-decoration: underline;}

c) Wechsel der Schriftfarbe, Unterstreichung:

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

d) Wechsel der Schriftfarbe, keine Unterstreichung:

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

e) Wechsel der Schriftfarbe, Entfernung der Unterstreichung:

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

f) Wechsel der Schriftfarbe, Unterstreichung hinzufügen:

 changes_color_adds_underline
/* changes color, adds underline */
    a.change-color-add-underline {text-decoration: none;}
    a.change-color-add-underline:hover {color: #ff0066; text-decoration: underline;}
 Fertige Beispiele ansehen:
demo2
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: 
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

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: