diff options
Diffstat (limited to 'files/de/web/css/text-shadow/index.html')
| -rw-r--r-- | files/de/web/css/text-shadow/index.html | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/files/de/web/css/text-shadow/index.html b/files/de/web/css/text-shadow/index.html new file mode 100644 index 0000000000..89b3f6907e --- /dev/null +++ b/files/de/web/css/text-shadow/index.html @@ -0,0 +1,145 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - CSS Text + - Eigenschaft + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/text-shadow +--- +<div>{{Cssref}}</div> + +<h2 id="Übersicht">Übersicht</h2> + +<p>Die <strong><code>text-shadow</code></strong> CSS Eigenschaft fügt Text Schatten hinzu. Sie akzeptiert eine kommaseparierte Liste von Schatten, die auf den Text und {{cssxref("text-decoration","Textdekorationen")}} des Elements angewendet werden sollen.</p> + +<p>Jeder Schatten wird mit einem Versatz vom Text angegeben, zusammen mit optionalen Farb- und Unschärferadiuswerten.</p> + +<p>Mehrere Schatten werden von vorne nach hinten angewendet, wobei der zuerst angewendete Schatten oben ist.</p> + +<p>Diese Eigenschaft gilt sowohl für {{cssxref("::first-line")}} als auch {{cssxref("::first-letter")}} <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelemente</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css">/* 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; +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><color></dt> + <dd>Optional. Kann entweder vor oder nach dem Versatzwert angegeben werden. Falls die Farbe nicht angegeben wurde, wird eine vom User Agent bestimmte Farbe verwendet. {{note("Falls Konsistenz zwischen den Browsern gewünscht ist, sollte eine Farbe explizit gewählt werden.")}}</dd> + <dt><offset-x> <offset-y></dt> + <dd>Benötigt. Diese <code><length></code> Werte bestimmen den Versatz des Schattens vom Text. <code><offset-x></code> bestimmt die horizontale Distanz; ein negativer Wert platziert den Schatten links vom Text. <code><offset-y></code> bestimmt die vertikale Distanz; ein negativer Wert platziert den Schatten oberhalb des Texts. Falls beide Werte <code>0</code> sind, wird der Schatten hinter dem Text platziert (und kann einen Unschärfeeffekt erzeugen, falls <code><blur-radius></code> gesetzt ist).<br> + Siehe {{cssxref("<length>")}} für mögliche Einheiten.</dd> + <dt><blur-radius></dt> + <dd>Optional. Dies ist ein {{cssxref("<length>")}} Wert. Falls nicht angegeben, ist der Standardwert <code>0</code>. Je größer dieser Wert ist, desto größer ist die Unschärfe; der Schatten wird ausgedehnter und geringer.</dd> +</dl> + +<h3 id="Formale_Syntax">Formale Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Beispiele">Beispiele</h2> + +<div id="Beispiel1"> +<pre class="brush: css">.red-text-shadow { + text-shadow: red 0 -2px; +}</pre> + +<pre class="brush: html"><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></pre> +</div> + +<p>{{EmbedLiveSample('Beispiel1', '689px', '90px')}}</p> + +<div id="Beispiel2"> +<pre class="brush:css">.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; +}</pre> + +<pre class="brush: html"><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></pre> +</div> + +<p>{{EmbedLiveSample('Beispiel2', '689px', '180px')}}</p> + +<div id="Beispiel3"> +<pre class="brush:css">.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; +}</pre> + +<pre class="brush: html"><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></pre> +</div> + +<p>{{EmbedLiveSample('Beispiel3', '689px', '90px')}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definiert <code>text-shadow</code> als animierbar.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Die CSS Eigenschaft <code>text-shadow</code> wurde <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">in CSS2 inkorrekt definiert</a> und in CSS2 (Level 1) verworfen. Die <em>CSS Text Module Level 3</em> Spezifikation hat die Syntax verbessert und präzisiert. Später wurde sie in den neuen Arbeitsentwurf <em><a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">CSS Text Decoration Module Level 3</a></em> verschoben.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.text-shadow")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{cssxref("box-shadow")}}</li> +</ul> |