text-shadow

Übersicht

Die text-shadow CSS Eigenschaft fügt Text Schatten hinzu. Sie akzeptiert eine kommaseparierte Liste von Schatten, die auf den Text und textdekorationen des Elements angewendet werden sollen.

Jeder Schatten wird mit einem Versatz vom Text angegeben, zusammen mit optionalen Farb- und Unschärferadiuswerten.

Mehrere Schatten werden von vorne nach hinten angewendet, wobei der zuerst angewendete Schatten oben ist.

Diese Eigenschaft gilt sowohl für ::first-line als auch ::first-letter Pseudoelemente.

Syntax

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y */
/* Für color und blur-radius werden Standardwerte verwendet */
text-shadow: 5px 10px;

/* Globale Werte */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Werte

<color>

Optional. Kann entweder vor oder nach dem Versatzwert angegeben werden. Falls die Farbe nicht angegeben wurde, wird eine vom User Agent bestimmte Farbe verwendet.

Hinweis: Falls Konsistenz zwischen den Browsern gewünscht ist, sollte eine Farbe explizit gewählt werden.

<offset-x> <offset-y>

Benötigt. Diese <length> Werte bestimmen den Versatz des Schattens vom Text. <offset-x> bestimmt die horizontale Distanz; ein negativer Wert platziert den Schatten links vom Text. <offset-y> bestimmt die vertikale Distanz; ein negativer Wert platziert den Schatten oberhalb des Texts. Falls beide Werte 0 sind, wird der Schatten hinter dem Text platziert (und kann einen Unschärfeeffekt erzeugen, falls <blur-radius> gesetzt ist).
Siehe <length> für mögliche Einheiten.</length>

<blur-radius>

Optional. Dies ist ein <length> Wert. Falls nicht angegeben, ist der Standardwert 0. Je größer dieser Wert ist, desto größer ist die Unschärfe; der Schatten wird ausgedehnter und geringer.</length>

Formale Syntax

none | <shadow-t>#
wobei 
<shadow-t> = [ <length>{2,3} && <color>? ]
wobei 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
wobei 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
wobei 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Beispiele

.red-text-shadow {
   text-shadow: red 0 -2px;
}

<p class="red-text-shadow">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

.white-with-blue-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}

<p class="white-with-blue-shadow">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

.gold-on-gold {
   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
   color: gold;
   background: gold;
}

<p class="gold-on-gold">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

Spezifikationen

Browser Kompatibilität

[1] Gecko (Firefox) unterstützt theoretisch unendlich viele Textschatten (bitte nicht versuchen!). Ab Gecko 2 wird der Unschärferadius aus Performancegründen bei 300 begrenzt. Falls der <color> Wert unbestimmt ist, verwendet Gecko den Wert der color Eigenschaft des Elements.

[2] Opera unterstützt aus Performancegründen maximal 6-9 Textschatten. Der Unschärferadius ist begrenzt auf 100px. Opera 9.5-10.1 folgt der alten, umgedrehten Zeichenreihenfolge (in CSS2 ist der erste definierte Schatten unten).

[3] Internet Explorer 5.5 unterstützt Microsofts Shadow und DropShadow Filter.

[4] Safari: Jeder Schatten, der nicht explizit eine Farbe angibt, ist transparent. Safari 1.1-3.2 unterstützt nur einen Textschatten (zeigt den ersten Schatten einer kommaseparierten Liste an und ignoriert den Rest). Safari 4.0 (WebKit 528) und neuer unterstützen mehrere Textschatten. Konqueror unterstützt text-shadow ab Version 3.4.

Siehe auch

• box-shadow