Textschatten: text-shadow

Mithilfe von text-shadow ist es möglich einem Text einen Schatten zu verpassen ohne ein großes Bild laden zu müssen. Es ist sogar möglich einen verwischten Schatten oder mehrere zu einem Text hinzuzufügen.

Einfaches Beispiel

Im einfachsten Fall könnte das so aussehen:

p {
    text-shadow:0.1em 0.1em #c0c0c0}


Dem Text <P> wird ein grauer Schatten ein wenig nach rechts und unten verschoben hinzugefügt. Sollte der Schatten nicht sichtbar sein, versuchen Sie bitte großeren Text (z.B. <h1>) Die beiden Zahlen geben die Verschiebung (nach recht, nach unten) an, der Farbcode gibt die Farbe an. Diese kann auch am Anfang stehen.

Verschwommener Schatten

Verschwommener Schatten kann folgendermaßen erzeugt werden:

h1 {
     text-shadow: black 0.1em 0.1em 0.2em}


Ein solcher Schatten kann zum Beispiel hinter weiße Texte gelegt werden, die man vor einem hellen Hintergrund kaum sehen kann, gelegt werden, um deren Lesbarkeit zu erhöhen.

Mehrfacher Schatten

Merfacher Schatten kann folgendermaßen erreicht werden:

h1 {
    text-shadow: 
       0.2em 0.5em 0.1em #ff0000,
       -0.3em 0.1em 0.1em #00ff00,
       0.4em -0.3em 0.1em #0000ff}


Die verschiedenen Schatten werden dabei mittels Komma getrennt.

Konturen

Mithilfe von 4 nicht verschwommenen Schatten kann dem Text eine Kontur hinzugefügt werden. Dafür muss jeweils ein Schatten um ein paar Pixel nach rechts, links, oben und unten verschoben werden.