diff options
Diffstat (limited to 'files/fr/web/css/box-shadow/index.html')
| -rw-r--r-- | files/fr/web/css/box-shadow/index.html | 18 |
1 files changed, 8 insertions, 10 deletions
diff --git a/files/fr/web/css/box-shadow/index.html b/files/fr/web/css/box-shadow/index.html index 6c8ec5bc41..a8e3cae319 100644 --- a/files/fr/web/css/box-shadow/index.html +++ b/files/fr/web/css/box-shadow/index.html @@ -11,9 +11,7 @@ translation_of: Web/CSS/box-shadow <p>La propriété CSS <strong><code>box-shadow</code></strong> ajoute des ombres à la boîte d'un élément via une liste d'ombres séparées par des virgules. Une boîte d'ombre est définie avec des décalages horizontal et vertical par rapport à l'élément, avec des rayons de flou et d'étalement et avec une couleur.</p> -<div>{{EmbedInteractiveExample("pages/css/box-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> +<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div <p>Elle permet de projeter une ombre depuis un élément. Si une {{cssxref("border-radius")}} est définie sur l'élément avec l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches (<em>z order</em>) pour plusieurs ombres sera le même <a href="/fr/docs/Web/CSS/text-shadow">que pour les ombres texte</a> (la première ombre est sur le dessus).</p> @@ -59,17 +57,17 @@ box-shadow: unset; <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><a id="inset" name="inset"><code>inset</code></a></dt> + <dt><code>inset</code></dt> <dd>Si la valeur n'est pas définie (le cas par défaut), l'ombre sera une ombre portée (comme si la boîte était élevée au-dessus du contenu).<br> La présence du mot-clé <code>inset</code> modifie l'ombre afin qu'elle soit tournée vers l'intérieur du cadre (comme si le contenu était enfoncé dans la boîte). Les ombres tournées vers l'intérieur sont dessinées à l'intérieur de la bordure (même les transparentes), au-dessus de l'arrière-plan mais sous le contenu.</dd> - <dt><a id="offset" name="offset"><code><offset-x></code> <code><offset-y></code></a></dt> + <dt><code><offset-x></code> <code><offset-y></code></dt> <dd>Deux valeurs de longueur ({{cssxref("<length>")}} qui permettent de définir le décalage de l'ombre. <code><offset-x></code> définit la distance horizontale du décalage et les valeurs négatives placeront l'ombre à gauche de l'élément. <code><offset-y></code> définit la distance verticale et les distances négatives placent l'ombre au-dessus de l'élément (cf. {{cssxref("<length>")}} pour les différentes unités possibles).<br> Si les deux valeurs sont <code>0</code>, l'ombre est placée derrière l'élément (et peut générer un effet de flou si <code><blur-radius></code> et/ou <code><spread-radius></code> est utilisé).</dd> - <dt><a id="blur" name="blur"><code><blur-radius></code></a></dt> + <dt><code><blur-radius></code></dt> <dd>Une troisième valeur de longueur ({{cssxref("<length>")}}). Plus cette valeur sera grande, plus le flou de l'ombre sera diffus : l'ombre sera donc plus étalée et plus légère. Les valeurs négatives ne sont pas autorisées. Si la valeur n'est pas définie, sa valeur par défaut est <code>0</code> (le côté de l'ombre est rectiligne).</dd> - <dt><a id="spread" name="spread"><code><spread-radius></code></a></dt> + <dt><code><spread-radius></code></dt> <dd>Une quatrième valeur de longueur ({{cssxref("<length>")}}). Les valeurs positives étaleront l'ombre et les valeurs négatives rétréciront l'ombre. Si elle n'est pas définie, la valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément).</dd> - <dt><a id="color" name="color"><code><color></code></a></dt> + <dt><code><color></code></dt> <dd>Une valeur de couleur ({{cssxref("<color>")}}). Si la valeur n'est pas définie, la couleur utilisée dépend du navigateur ce sera généralement la propriété {{cssxref("color")}} mais Safari affiche une ombre transparente.</dd> </dl> @@ -81,7 +79,7 @@ box-shadow: unset; {{csssyntax}} -<h2 class="cleared" id="Exemples">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <h3 id="CSS">CSS</h3> @@ -117,7 +115,7 @@ box-shadow: unset; <p>{{EmbedLiveSample("Exemples","400","300")}}</p> -<h2 class="cleared" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <thead> |