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.

Initialwertnone
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Werteine Farbe plus drei absolute L├Ąngen
Animationstypeine Liste von Schatten

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.
<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.

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( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

Spezifikation Status Kommentar
CSS Transitions
Die Definition von 'text-shadow' in dieser Spezifikation.
Arbeitsentwurf Definiert text-shadow als animierbar.
CSS Text Decoration Module Level 3
Die Definition von 'text-shadow' in dieser Spezifikation.
Anw├Ąrter Empfehlung Die CSS Eigenschaft text-shadow wurde in CSS2 inkorrekt definiert und in CSS2 (Level 1) verworfen. Die CSS Text Module Level 3 Spezifikation hat die Syntax verbessert und pr├Ązisiert. Sp├Ąter wurde sie in den neuen Arbeitsentwurf CSS Text Decoration Module Level 3 verschoben.

Browser Kompatibilit├Ąt

BCD tables only load in the browser

Siehe auch