Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

Links mit CSS formatieren

Die Möglichkeiten, Links zu unterstreichen (oder auch nicht), farblich zu ändern, oder sogar zu überstreichen kennt jeder. Sogar alte Browser können diese Formatierungen darstellen, abgesehen von NN 4.x, der die Pseudoklasse "hover" nicht kennt. Hier soll es darum gehen, Effekte vorzustellen, die nicht auf jeder Seite zu sehen sind.

Beispiel 1:  Der Link wird bei Mausberührung gepunktet unterstrichen.

Beispiel 2: Dieser Link wird sogar zweifarbig unterstrichen, wobei man mit Hilfe von "padding" auch noch den Abstand bestimmen kann. Beide Beispiele sind auch tauglich für ältere Browser, bei denen die Links zwar weitgehend unformatiert bleiben, aber einwandfrei funktionieren.

Jetzt wird es etwas komplizierter, wir definieren mal eine Schaltfläche, in der sich Buttons befinden, die man drücken kann. Und zwar ohne Flash, JavaScript oder eine Tabelle. Für die Mozilla/Netscape/Firefox Fans unter Euch habe ich noch einen Effekt eingebaut, der im Internet Explorer nur mit Grafik zu realisieren ist, nämlich abgerundete Ecken, die durch -moz-border-radius:Zahlpx; realisiert werden, der Internet Explorer ignoriert diesen Style. Allerdings wird dadurch invalider Code erzeugt. CSS3 hat diese Möglichkeit aber implementiert.

Beispiel 3Beispiel 3Beispiel 3Beispiel 3

Die Möglichkeiten, was man mit CSS alles machen kann, sind fast unbegrenzt. Zum Beispiel kann man auch Bildertausch vornehmen. Einfach mal die Links anklicken.

LinksListen mit CSSVertikale SchriftNeu bei Dr Web

Probiert mal diesen Link aus.
Dieser Link führt zum Beispiel 4

Auch dieses Beispiel ist in alten Browsern funktionstüchtig, zeigt natürlich aber den Hovereffekt nicht an.

Weitere Beispiele für Designer Links gibt es hier.