perun.net – WordPress & Webwork



CSS3: Art, Stil und Farbe des Unterstrichs beeinflussen

Von am 14. 08. 2011 um 17:36 – Aktualisiert am 06. 08. 2012 um 23:17

Mit CSS3 in Mozilla Firefox Unterstriche definieren, die sich u.a. auch farblich vom dem Rest des Textes unterscheiden.

Es gehört zu den Grundlagen von CSS zu wissen, wie man ein Wort, Satz oder Verweis unterstreicht. Hier ein sehr einfaches und verkürztes Beispiel:

a       {color: #900; text-decoration: none;}
a:hover {text-decoration: underline;}

Damit zu keinen Missverständnissen kommt, sollte man im Web vorsichtig sein wenn Teile unterstreicht, die keine Verweise sind. Da sehr viele Nutzer dann fast instinktiv darauf klicken, weil sie dort einen Link erwarten. Aber dies nur am Rande.

Es geht hier um etwas anderes. Bis jetzt hatte man keinen direkten Einfluss auf die Farbe des Unterstrichs, den bekam er durch den Wert der Eigenschaft color (Vordergrund- bzw. der Textfarbe). Wollte man hier den Unterstrich anders einfärben musste man zum Beispiel, die eigentliche Unterstreichung ausblenden und mit der Eigenschaft border (Rahmen) arbeiten. Das war zwar eine Lösung, die aber so ihre Tücken hatte, unter anderem wenn man Bilder verlinkt hatte … die bekamen, im Gegensatz zu text-decoration, dann auch einen "Unterstrich" ab.

Seit gewisser Zeit existieren drei CSS3-Eigenschaften (Status: "Editor's Draft"), die das Problem lösen können: text-decoration-line, text-decoration-style und text-decoration-color. Diese werden seit der Version 6.0 auch von Firefox unterstützt und in der Zukunft auch von allen anderen Browsern (SeaMonkey & Co.) die auf Gecko 6 und höher aufsetzen.

Hier ein Beispiel, zuerst das CSS:

a.beispiel {
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: double;
    -moz-text-decoration-color: #900;
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-color: #900;
}

und jetzt das Beispiel wo es wirken sollte:

Ich sollte einen farbigen und doppelten Unterstrich haben

Und hier zum Vergleich, für Leute, deren Browser das nicht unterstützt, wie es bei mir in Firefox 6 ausschaut:

CSS3: farbige Unterstriche

Das ist jetzt sowohl vom Stil und von den Farben her ein etwas kräftigeres Beispiel. :-) Aber es hindert keiner einen auch dezenter vorzugehen.

Ich habe es vorhin getestet und zumindest der aktuelle Google Chrome (13.0.782.112) und Opera (11.50) unterstützen keine der drei Eigenschaften weder mit dem Vendor-Präfix (-webkit- bzw. -o-) noch ohne.

Weiterführende Quellen:

Diesen Artikel weiterempfehlen:

Hinweis:
Schulungsunterlagen für WordPress
Aktuell und praxiserprobt. Als E-Book für den Privatgebrauch oder als PDF-Volumenlizenz für den geschäftlichen Einsatz.

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
, ,  
Beitrag:
Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 


4 Kommentare

  1. 1.Peter

    Kommentar vom 14.08.2011 um 18:33

    Solange das noch nicht unterstützt wird und jemand trotzdem andersfarbige Linkunterstreichungen haben möchte, einfach text-decoration auf none und die Linien mit border-bottom bauen (Anleitung). Geht wunderbar in allen Browsern :wink:

  2. 2.Peter

    Kommentar vom 14.08.2011 um 18:34

    Man sollte vor dem Posten von klugen Kommentaren doch den Beitrag ganz lesen. Vlad hatte das mit border ja schon geschrieben… Sorry :oops:

  3. 3.Klaus

    Kommentar vom 14.09.2011 um 20:22

    Dann hoffe ich mal, dass das demnächst noch mit einigen anderen Browsern funktioniert.
    Wobei ich ein Unterstreichung mit border-bottom bevorzuge, da sie etwas weiter vom Text entfernt ist.

    Herzliche Grüße
    Klaus

  4. 4.Gradient Border – CSS3 Adventskalender Tag 1 | maddesigns

    Pingback vom 01.12.2011 um 08:00

    [...] In der CSS Text Level 3 Spezifikation gibt es seit einiger Zeit die Eigenschaft text-decoration-color mit der man die Text-(Link-)Unterlinie andersfarbig gestalten kann. Bisher wird diese Eigenschaft laut MDN nur vom Firefox ab der Version 6 mit dem Prefix -moz- unterstützt. Zukünftig soll es ähnlich wie auch für border oder outline möglich sein für text-decoration Shorthand-Values wie folgt anzugeben: text-decoration: <text-decoration-line> || <text-decoration-color> || <text-decoration-style> || blink anzugeben. Das ist ein Vorteil, wenn weitere Browser das unterstützen. Auf perun.net gibt es bereits einen umfassenden Artikel über CSS3 text-decoration. [...]

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.