From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/text-shadow/index.md | 145 +++++++++++++++------------------- 1 file changed, 65 insertions(+), 80 deletions(-) (limited to 'files/fr/web/css/text-shadow') diff --git a/files/fr/web/css/text-shadow/index.md b/files/fr/web/css/text-shadow/index.md index 359a0acb0e..7df9a97ea6 100644 --- a/files/fr/web/css/text-shadow/index.md +++ b/files/fr/web/css/text-shadow/index.md @@ -7,15 +7,16 @@ tags: - Reference translation_of: Web/CSS/text-shadow --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété text-shadow ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux décorations 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.

+La propriété **`text-shadow`** ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux [décorations](/fr/docs/Web/CSS/text-decoration) 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. -
{{EmbedInteractiveExample("pages/css/text-shadow.html")}}
+{{EmbedInteractiveExample("pages/css/text-shadow.html")}} -

Syntaxe

+## Syntaxe -
/* offset-x | offset-y | blur-radius | color */
+```css
+/* offset-x | offset-y | blur-radius | color */
 text-shadow: 1px 1px 2px black;
 
 /* color | offset-x | offset-y | blur-radius */
@@ -35,101 +36,85 @@ text-shadow: 5px 10px;
 text-shadow: inherit;
 text-shadow: initial;
 text-shadow: unset;
-
+``` -

Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules.

+Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules. -

Chaque ombre est spécifiée par deux ou trois valeurs <length>, suivies d'une valeur <color>. Les deux premières valeurs <length> sont les valeurs <decalage-x> et <decalage-y>. La troisième valeur <length>, facultative, est le <rayon-de-flou>. La valeur <color> est la couleur de l'ombre.

+Chaque ombre est spécifiée par deux ou trois valeurs ``, suivies d'une valeur ``. Les deux premières valeurs `` sont les valeurs `` et ``. La troisième valeur ``, facultative, est le ``. La valeur `` est la couleur de l'ombre. -

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.

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

Cette propriété s'applique aux deux pseudo-éléments {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}.

+Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments) {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}. -

Valeurs

+### Valeurs -
-
{{cssxref("<color>")}}
-
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.
-
<decalage-x> <decalage-y>
-
Obligatoires. Ces valeurs {{cssxref("<length>")}} définissent la distance de l'ombre par rapport au texte. <decalage-x> définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. <decalage-y> définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à 0, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du <rayon-de-flou>).
-
<rayon-de-flou>
-
Optionnel. C'est une valeur {{cssxref("<length>")}}). 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 0.
-
+- {{cssxref("<color>")}} + - : 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. +- \ \ + - : Obligatoires. Ces valeurs {{cssxref("<length>")}} définissent la distance de l'ombre par rapport au texte. `` définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. `` définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à `0`, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du ``). +- \ + - : Optionnel. C'est une valeur {{cssxref("<length>")}}). 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 `0`. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Ombre simple

+### Ombre simple - -
.red-text-shadow {
+```css
+.red-text-shadow {
    text-shadow: red 0 -2px;
-}
+} +``` -
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
+```html
+
Sed ut perspiciatis unde omnis iste
     natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
+ totam rem aperiam, eaque ipsa quae ab illo inventore.

+``` -

{{EmbedLiveSample('ombre_simple', '660px', '90px')}}

+{{EmbedLiveSample('ombre_simple', '660px', '90px')}} -

Ombres multiples

+### Ombres multiples -
.white-text-with-blue-shadow {
+```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;
-}
+} +``` -
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
+```html
+
Sed ut perspiciatis unde omnis iste
     natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsaquae ab illo inventore.</p>
- -

{{EmbedLiveSample('ombres_multiples', '660px', '170px')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Spécifie text-shadow comme animable.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}La propriété CSS text-shadow était incorrectement définie dans CSS2 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 CSS Text Decoration Module Level 3.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.text-shadow")}}

- -

Notes CSS Quantum

- -
    -
  • Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une text-shadow avec une couleur spécifiée et une ext-shadow sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme Quantum CSS ou Stylo), prévu pour être disponible dans Firefox 57.
    • -
- -

Voir aussi

- - + totam rem aperiam, eaque ipsaquae ab illo inventore.

+``` + +{{EmbedLiveSample('ombres_multiples', '660px', '170px')}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}} | {{Spec2('CSS3 Transitions')}} | Spécifie `text-shadow` comme animable. | +| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}} | {{Spec2('CSS3 Text Decoration')}} | La propriété CSS `text-shadow` était [incorrectement définie dans CSS2](https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props) 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 [CSS Text Decoration Module Level 3](https://www.w3.org/TR/css-text-decor-3/). | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.text-shadow")}} + +### Notes CSS Quantum + +- Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une `text-shadow` avec une couleur spécifiée et une `ext-shadow` sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo)), prévu pour être disponible dans Firefox 57. + +## Voir aussi + +- [Text Shadow Generator](https://cssgenerator.org/text-shadow-css-generator.html) - Un générateur CSS d'ombre de texte interactif +- {{cssxref("box-shadow")}} +- Le type de données {{cssxref("<color>")}} (pour spécifier la couleur d'ombre) +- [Appliquer des couleurs sur des éléments HTML](/fr/docs/Web/HTML/Applying_color) -- cgit v1.2.3-54-g00ecf