text-shadow

  • Raccourci de la révision : CSS/text-shadow
  • Titre de la révision : text-shadow
  • ID de la révision : 320005
  • Créé :
  • Créateur : teoli
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }} {{ Fx_minversion_header(3.1) }}

Résumé

La propriété text-shadow accepte une liste d'effets d'ombrage séparés par des virgules qui peuvent être appliqués au texte et aux décorations de texte de l'élément.

  • {{ Xref_cssinitial() }} : {{ Cssxref("none") }}
  • S'applique à : tous les éléments
  • {{ Xref_cssinherited() }} : non en CSS2, oui en CSS3
  • Médium : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} : une couleur et trois longueurs

Syntaxe

text-shadow: none | {{ mediawiki.external('<shadow>, ') }}</shadow>* <shadow> | {{ Cssxref("inherit") }} ;

<shadow> est définie comme :

[ {{ Xref_csscolorvalue() }}? {{ Xref_csslength() }} <longueur> <longueur>? | <longueur> <longueur> <longueur>? <couleur>? ]

Valeurs

<couleur>
La couleur de l'ombre. Si celle-ci n'est pas spécifiée, en CSS2 la valeur de « color » sera utilisée, et en CSS3 c'est le navigateur qui choisit la couleur à utiliser. La plupart des implémentations utilisent la règle de CSS2.
<longueur> <longueur>
Les deux premières longueurs sont les décalages X et Y par rapport au texte. C'est-à-dire que vous pouvez placer l'ombre directement derrière le texte si ces deux valeurs valent 0px.
<longueur>
La troisième longueur spécifie le rayon de l'ombre. Plus cette valeur est grande, plus l'ombre est floue, afin que l'ombre devienne plus grande et plus claire. Si cette valeur n'est pas spécifiée, elle vaudra 0px.

Examples

text-shadow: orange 0 -2px;

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.

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;

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.

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;

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.

Notes

Dans la spécification CSS2, la description de cette propriété contredit la syntaxe de données. La spécification CSS3 Text corrige cette ambigüité.

Spécifications

Compatibilité des navigateurs

Navigateur Plus petite version
Internet Explorer N/A
Opera 9.5
Safari 1.1

Au moment de rédiger cette page :

  • Safari ne gère qu'une ombre. Si une liste séparée par des virgule est fournie, seule la première ombre sera affichée et les autres seront ignorées.
  • Opera 9.5 gère un maximum de 6 ombres et respecte l'ordre de dessin de CSS2 (la première ombre spécifiée est en dessous).
  • Gecko 1.9.1 gère théoriquement une infinité d'ombres (n'essayez pas) et respecte l'ordre de dessin de CSS3 (la première ombre spécifiée est au dessus).

Voir également

{{ CSS_Reference:Text() }}

{{ languages( { "en": "en/CSS/text-shadow" } ) }}

Source de la révision

<p>{{ CSSRef() }} {{ Fx_minversion_header(3.1) }}</p>
<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>La propriété text-shadow accepte une liste d'effets d'ombrage séparés par des virgules qui peuvent être appliqués au texte et aux <a href="/fr/CSS/text-decoration" title="fr/CSS/text-decoration">décorations de texte</a> de l'élément.</p>
<ul>
  <li>{{ Xref_cssinitial() }}&nbsp;: {{ Cssxref("none") }}</li>
  <li>S'applique à&nbsp;: tous les éléments</li>
  <li>{{ Xref_cssinherited() }}&nbsp;: non en CSS2, oui en CSS3</li>
  <li>Médium&nbsp;: {{ Xref_cssvisual() }}</li>
  <li>{{ Xref_csscomputed() }}&nbsp;: une couleur et trois longueurs</li>
</ul>
<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
<p><code>text-shadow: none | {{ mediawiki.external('<shadow>, ') }}</shadow>* &lt;shadow&gt; | </code>{{ Cssxref("inherit") }}&nbsp;;</p>
<p>où <code>&lt;shadow&gt;</code> est définie comme&nbsp;:</p>
<p><code>[ </code> {{ Xref_csscolorvalue() }}<code>?</code> {{ Xref_csslength() }} <code>&lt;longueur&gt; &lt;longueur&gt;? | &lt;longueur&gt; &lt;longueur&gt; &lt;longueur&gt;? &lt;couleur&gt;? ]</code></p>
<h3 id="Valeurs" name="Valeurs">Valeurs</h3>
<dl>
  <dt>
    <code>&lt;couleur&gt;</code></dt>
  <dd>
    La couleur de l'ombre. Si celle-ci n'est pas spécifiée, en CSS2 la valeur de «&nbsp;<a href="/fr/CSS/color" title="fr/CSS/color"><code>color</code></a>&nbsp;» sera utilisée, et en CSS3 c'est le navigateur qui choisit la couleur à utiliser. La plupart des implémentations utilisent la règle de CSS2.</dd>
</dl>
<dl>
  <dt>
    <code>&lt;longueur&gt; &lt;longueur&gt;</code></dt>
  <dd>
    Les deux premières longueurs sont les décalages X et Y par rapport au texte. C'est-à-dire que vous pouvez placer l'ombre directement derrière le texte si ces deux valeurs valent 0px.</dd>
</dl>
<dl>
  <dt>
    <code>&lt;longueur&gt;</code></dt>
  <dd>
    La troisième longueur spécifie le rayon de l'ombre. Plus cette valeur est grande, plus l'ombre est floue, afin que l'ombre devienne plus grande et plus claire. Si cette valeur n'est pas spécifiée, elle vaudra 0px.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
text-shadow: orange 0 -2px;
</pre>
<p style="text-shadow:orange 0 -2px">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 class="brush:css">
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>
<p style="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">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, <u>totam rem aperiam</u>, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<pre class="brush:css">
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>
<p style="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">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, <u>totam rem aperiam</u>, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<h3 id="Notes" name="Notes">Notes</h3>
<p>Dans la spécification CSS2, la description de cette propriété contredit la syntaxe de données. La spécification CSS3 Text corrige cette ambigüité.</p>
<h3 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h3>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props">CSS 2</a></li>
  <li><a class="external" href="http://www.w3.org/TR/css3-text/#text-shadow">CSS 3</a></li>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/changes.html#c16">Absente</a> dans <a class="external" href="http://www.w3.org/TR/CSS21/">CSS2.1</a></li>
</ul>
<h3 id="Compatibilit.C3.A9_des_navigateurs" name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Navigateur</th>
      <th>Plus petite version</th>
    </tr>
    <tr>
      <td>Internet Explorer</td>
      <td>N/A</td>
    </tr>
    <tr>
      <td>Opera</td>
      <td>9.5</td>
    </tr>
    <tr>
      <td>Safari</td>
      <td>1.1</td>
    </tr>
  </tbody>
</table>
<p>Au moment de rédiger cette page&nbsp;:</p>
<ul>
  <li><strong>Safari</strong> ne gère qu'une ombre. Si une liste séparée par des virgule est fournie, seule la première ombre sera affichée et les autres seront ignorées.</li>
  <li><strong>Opera 9.5</strong> gère un maximum de 6 ombres et respecte l'ordre de dessin de CSS2 (la première ombre spécifiée est <em>en dessous</em>).</li>
  <li><strong>Gecko 1.9.1</strong> gère théoriquement une infinité d'ombres (n'essayez pas) et respecte l'ordre de dessin de CSS3 (la première ombre spécifiée est <em>au dessus</em>).</li>
</ul>
<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3>
<p>{{ CSS_Reference:Text() }}</p>
<p>{{ languages( { "en": "en/CSS/text-shadow" } ) }}</p>
Revenir à cette révision