initial commit

1 files changed, 142 insertions, 0 deletions

diff --git a/files/fr/web/css/text-shadow/index.html b/files/fr/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..af5d743c79
--- /dev/null
+++ b/files/fr/web/css/text-shadow/index.html
@@ -0,0 +1,142 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-shadow</code></strong> ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux <a href="/fr/docs/Web/CSS/text-decoration">décorations</a> de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 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
+/* Utiliser les défauts pour la couleur et le rayon de flou */
+text-shadow: 5px 10px;
+
+/* Valeurs globales */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+</pre>
+
+<p>Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules.</p>
+
+<p>Chaque ombre est spécifiée par deux ou trois valeurs <code>&lt;length&gt;</code>, suivies d'une valeur <code>&lt;color&gt;</code>. Les deux premières valeurs <code>&lt;length&gt;</code> sont les valeurs <code>&lt;decalage-x&gt;</code> et <code>&lt;decalage-y&gt;</code>. La troisième valeur <code>&lt;length&gt;</code>, facultative, est le <code>&lt;rayon-de-flou&gt;</code>. La valeur <code>&lt;color&gt;</code> est la couleur de l'ombre.</p>
+
+<p>Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus.</p>
+
+<p>Cette propriété s'applique aux deux <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a> {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement.</dd>
+ <dt>&lt;decalage-x&gt; &lt;decalage-y&gt;</dt>
+ <dd>Obligatoires. Ces valeurs {{cssxref("&lt;length&gt;")}} définissent la distance de l'ombre par rapport au texte. <code>&lt;decalage-x&gt;</code> définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. <code>&lt;decalage-y&gt;</code> définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à <code>0</code>, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du <code>&lt;rayon-de-flou&gt;</code>).</dd>
+ <dt>&lt;rayon-de-flou&gt;</dt>
+ <dd>Optionnel. C'est une valeur {{cssxref("&lt;length&gt;")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut <code>0</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ombre_simple">Ombre simple</h3>
+
+<div id="Example1">
+<pre class="brush: css">.red-text-shadow {
+   text-shadow: red 0 -2px;
+}</pre>
+
+<pre class="brush: html">&lt;p class="red-text-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
+
+<h3 id="Ombres_multiples">Ombres multiples</h3>
+
+<div id="Example2">
+<pre class="brush:css">.white-text-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, serif;
+}</pre>
+
+<pre class="brush: html">&lt;p class="white-text-with-blue-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsaquae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Spécifie <code>text-shadow</code> comme animable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>La propriété CSS <code>text-shadow</code> était <a class="external" href="https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">incorrectement définie dans CSS2</a> et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("css.properties.text-shadow")}}</p>
+
+<h3 id="Notes_CSS_Quantum">Notes CSS Quantum</h3>
+
+<ul>
+ <li>Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une <code>text-shadow</code> avec une couleur spécifiée et une <code>ext-shadow</code> sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>), prévu pour être disponible dans Firefox 57.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow Generator</a> - Un générateur CSS d'ombre de texte interactif</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}} (pour spécifier la couleur d'ombre)</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML</a></li>
+</ul>