Byteshift: Webdesign aus Berlin


was| wer| wo| details| english

CSS Design: Unterstriche nach Maß
Autor: Stuart Robertson
Alistapart Ausgabe: 169

Obwohl Webdesigner meistens umfassende Kontrolle über die Darstellung eines Dokuments haben, bietet elementares CSS nicht viele Möglichkeiten zur Gestaltung der Unterstriche einer Seite. Mit einem bißchen Nachhilfe können Sie allerdings die Kontrolle über das Aussehen ihrer Links wiedererlangen.

Unterstriche nach Maß bieten neue kreative Möglichkeiten, die für manche Websites das Richtige sein können. Sie können außerdem dazu dienen, durch zusätzliche visuelle Hinweise die Unterschiede zwischen den verschiedenen Linktypen eines Dokuments zu verdeutlichen.

Die Vorbereitungen

Sie sollten beginnen, indem sie eine Grafik für ihre Unterstriche erstellen. Diese Grafik wird horizontal gekachelt; wenn sie möchten, daß der Hintergrund durchscheint, brauchen sie ein transparentes Gif. Sollte ihre Unterstrichgrafik höher als ein paar Pixel sein, sollten Sie die Zeilenhöhe {line-height, d.Üb.} erhöhen, um mehr Platz zwischen dem unterem Rand einer Zeile und dem oberen der nächsten zu schaffen

p { line-height: 1.5; }

Bevor wir den eigenen Unterstrich erstellen können, müßen wir die vorhandene entfernen.

a { text-decoration: none; }

Um den eigenen Unterstrich zu erstellen, werden wir dem Linkelement ein Hintergrundbild zuweisen.

{ background-image: url(underline.gif); }

Wir möchten, daß die Grafik entlang dem unteren Rand unseres Texts horizontal, aber nicht vertikal, gekachelt wird - sie würde sonst hinter dem Text selbst sichtbar. Wir werden die Grafik darauf beschränken, entlang der x-Achse wiederholt zu werden.

a { background-repeat: repeat-x; }

Um sicherzustellen, daß unsere Grafik unabhängig von der Schriftgröße unter dem Linktext erscheint, werden wir die background-position Eigenschaft einsetzen, um das Bild am unteren Rand des Linkelements zu setzen. Bei einigen Hintergrundbildern wie z.B. Pfeilen, werden Sie möglicherweise eine Seite zur Ausrichtung des Bildes bevorzugen. In unserem Beispiel werden wir den Hintergrund nach unten rechts ausrichten:

a { background-position: 100% 100%; }

Um für unseren grafischen Unterstrich unter dem Linktext Platz zu schaffen, werden wir etwas Padding hinzufügen. Die genaue Position des grafischen Unterstrichs in Bezug zur Grundlinie des Linktext wird je nach verwendeter Schriftrgröße variieren. Es empfiehlt sich, mit einem exakt der Höhe ihres grafischen Unterstrichs entsprechendem bottom-padding zu beginnen und dies dann je nach Bedarf anzupassen:

a { padding-bottom: 4px; }

Da der grafische Unterstrich am unteren Rand des Linkelements positioniert ist, müßen wir sicherstellen, daß unsere Links sich nicht über mehrere Zeilen erstrecken. (Würden sie sich über mehrere Zeilen erstrecken, so zeigte nur der Linktext der untersten Zeile den grafsichen Unterstrich.) Wir werden die CSS Eigenschaft white-space um unseren Linktext am Zeilenumbruch zu hindern.

a { white-space: nowrap; }

Alle CSS Eigenschaften des Links können kombiniert werden:

a {
  text-decoration: none; 
  background: url(underline.gif) repeat-x 100% 100%;
  padding-bottom: 4px;
  white-space: nowrap;
  }
    

Wenn sie den grafischen Unterstrich nur während eines Rollovers erscheinen lassen wollen, müßen sie die CSS Eigenschaft background einfach nur der :hover Pseudoklasse anstatt direkt dem Linkelement zuweisen.

a {
  text-decoration: none;
  padding-bottom: 4px;
  white-space: nowrap;
  }

a:hover {
  background: url(underline.gif) repeat-x 100% 100%;
  }

Beispiele

Hier einige Beispiele für die grafischen Unterstriche, die mit dieser Technik geschaffen werden können:

Dieser statische Unterstrich und dieser Rollovereffekt könnten zu einem modernen Design passen.

Dieser statische Unterstrich und dieser Rollovereffekt sind groovy, Baby.

Dieser statische Unterstrich und dieser Rollovereffekt könnten zur Anzeige externer Links eingesetzt werden.

(Die Animationseffekte sind nicht in jedem Browser darstellbar; einige, z.B. Safari 1.0, zeigen nur den ersten Zustand.)


Stuart Robertson ist ein Webdesigner, er lebt in Ontario, Kanada.

Originaladresse: www.alistapart.com/articles/customunderlines/
Alistapart Diskussionsforum (englisch): www.alistapart.com/discuss/customunderlines/

Translated with the permission of A List Apart Magazine and the author[s].

Wichtige Links zum Thema Web Design und Typographie

Valid XHTML 1.0! Valid CSS!