Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/text-shadow.html
Aktuelle - übersetzte - Version: http://www.WSS-EXPERT.de/Style/Examples/007/text-shadow.html
Übersetzer: A.Friedrich
Bookmark:

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original. Der Übersetzer bedankt sich bei den folgenden Seiten für Ihre Unterstützung: WP .
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

Web Style Sheets
CSS Tips & Tricks

(Diese Seite verwendet CSS Style Sheets)

Text mit Schatten

Unscharfer Textschatten

Lesbarer weisser Text

Mehrfach Schatten

Konturen

Neon Glühen

Text mit Schatten

CSS3 bietet eine Eigenschaft 'text-shadow' um einem Buchstaben einen Schattenwurf zuzuweisen. In seiner einfachsten Form sieht es so aus:

h3 {text-shadow: 0.1em 0.1em #333}

Hier wurde ein dunkelgrauer (#333) Schatten ein wenig nach rechts (0.1em) und unten (0.1em) - relativ zum Text - geworfen. Das Resultat sieht so aus:

Ein Text mit Schattenwurf

(Bis August 2005 unterstützen noch nicht alle Browser 'text-shadow'. Das hier Gezeigte sollte zumindest mit dem Safari und Konqueror funktionieren.)

Unscharfer Textschatten

Die einfachste Form von 'text-shadow' besitzt zwei Eigenschaften: eine Farbe (wie im obigen Beispiel #333) und eine Einrückung (Offset) (0.1em 0.1em im obigen Beispiel). Das Ergebnis ist ein scharfer Schatten mit dem angegebenen Offset. Aber der Offset kann auch unscharf eingestellt werden zur Erzeugung eines verwaschenen Schattens.

Der Wert der Unschärfe wird durch einen weiteren Offsetwert angegeben. Hier folgen zwei Zeilen, eine mit einer geringen Unschärfe (0.05em) und eine mit einer stärkeren Einstellung (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Das ist noch ziemlich scharf

Das ist schon wesentlich unschärfer

Lesbarer weisser Text

Wenn der Kontrast der Vordergrund - und Hintergrundfarbe gering ist kann ein Schatten einem Text eine bessere Lesbarkeit verleihen. Hier ein Beispiel von weissem Text auf einem hellen blauen Hintergrund. Einmal ohne - und einmal mit Schatten:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Ohne Schatten:

Hier gibt es keinen Schatten zu sehen.

Mit Schatten:

Aber hier vielleicht schon?

Mehrfach Schatten

Sie können auch mehr als nur einen Schatten verwenden. In der Realität sieht das aber schon ganz schön seltsam aus:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

Seltsam seltsam seltsam…

Aber mit einem wohl platzierten dunklen und einem hellen Schatten kann das Ergebnis ganz brauchbar ausfallen:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Schatten hier, Schatten da

Überall nur Schatten

Das ganze ist etwas gefährlich wenn Ihr Browser keine 'text-shadow' Eigenschaft kennt. Speziell hier sind Text - und Hintergrundfarben beinahe identisch (#CCCCCC und #D1D1D1), so dass Sie ohne Schatten kaum etwas erkennen können.

Konturen

Das zwei-Schatten Beispiel kann man noch etwas weiterführen. Mit vier Schatten kann den Buchstaben des Textes eine nette Umrandung zugewiesen werden:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Immer noch ein Beispiel zu Schatten

Und noch Eines

Gut, das ist keine perfekte Umrandung und zum aktuellen Zeitpunkt (August 2005) wird noch darüber diskutiert ob CSS eine separate Eigenschaft (oder einen Extra Paramater für 'text-decoration') besitzen sollte um bessere Umrandungen zu erzeugen.

Neon Glühen

Wenn Sie einen unscharfen Schatten hinten einen Text legen, also mit einem Offset Wert von 0, dann wir ein Effekt in der Art einer Neon Lampe produziert. Wenn Ihnen das Glühen eines einzelnen Schattens nicht genügt können Sie diese Prozedur beliebig oft wiederholen:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}

Ich glühe

Ich brenne

Ich lodere Lichter loh

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 4 Aug 2005;
last updated $Date: 2007/01/15 13:04:18 $ GMT

IMPRESSUM