diff options
Diffstat (limited to 'files/fr/web/css/cross-fade()/index.html')
| -rw-r--r-- | files/fr/web/css/cross-fade()/index.html | 35 |
1 files changed, 15 insertions, 20 deletions
diff --git a/files/fr/web/css/cross-fade()/index.html b/files/fr/web/css/cross-fade()/index.html index 454b03cc02..452ff95ab5 100644 --- a/files/fr/web/css/cross-fade()/index.html +++ b/files/fr/web/css/cross-fade()/index.html @@ -12,11 +12,11 @@ translation_of: Web/CSS/cross-fade() <p>La fonction CSS <strong><code>cross-fade()</code></strong> peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.</p> +<div class="warning"> +<p><strong>Attention :</strong> À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.</p> </div> -<h2 id="Syntaxe_spécification"><a id="Syntaxe" name="Syntaxe">Syntaxe (spécification)</a></h2> +<h2 id="Syntaxe_spécification">Syntaxe (spécification)</h2> <p>La fonction <code>cross-fade()</code> prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%.</p> @@ -26,7 +26,7 @@ translation_of: Web/CSS/cross-fade() <p>Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.</p> -<pre class="brush: css notranslate">cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ +<pre class="brush: css">cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ cross-fade(url(white.png) 25%, url(black.png) 75%); /* 25% blanche, 75% noire*/ cross-fade(url(white.png) 50%, url(black.png) 50%); /* 50% blanche, 50% noire */ cross-fade(url(white.png) 75%, url(black.png) 25%); /* 75% blanche, 25% noire */ @@ -38,7 +38,7 @@ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et <p>Les lignes précédentes peuvent ainsi s'écrire également :</p> -<pre class="brush: css notranslate">cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ +<pre class="brush: css">cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ cross-fade(url(white.png) 25%, url(black.png)); /* 25% blanche, 75% noire*/ cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */ cross-fade(url(white.png) 75%, url(black.png)); /* 75% blanche, 25% noire */ @@ -50,22 +50,17 @@ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et ver <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> -<div class="hidden">La syntaxe formelle décrite sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à proposer une<em>pull request</em> sur <a href="https://github.com/mdn/data">https://github.com/mdn/data</a>.</div> - -{{csssyntax}} - -<ul> -</ul> +<p>{{csssyntax}}</p> <h2 id="Exemples">Exemples</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="div"></div></pre> +<pre class="brush: html"><div id="div"></div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4-6] notranslate">#div { +<pre class="brush: css">#div { width: 300px; height: 300px; background-image: cross-fade( @@ -79,11 +74,11 @@ cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et ver <h2 id="Ancienne_syntaxe_implémentations">Ancienne syntaxe (implémentations)</h2> -<pre class="syntaxbox notranslate">cross-fade( <image, <image>, <percentage> )</pre> +<pre class="syntaxbox">cross-fade( <image, <image>, <percentage> )</pre> -<p>La spécification de la fonction <code>cross-fade()</code> permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et <a href="#Syntaxe">la syntaxe originale</a>, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec <code>-webkit-</code> pour Chrome, Opera et les autres navigateurs basés sur Blink.</p> +<p>La spécification de la fonction <code>cross-fade()</code> permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et <a href="#syntaxe">la syntaxe originale</a>, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec <code>-webkit-</code> pour Chrome, Opera et les autres navigateurs basés sur Blink.</p> -<pre class="brush: css notranslate">cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ +<pre class="brush: css">cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ cross-fade(url(white.png), url(black.png), 25%); /* 25% blanche, 75% noire */ cross-fade(url(white.png), url(black.png), 50%); /* 50% blanche, 50% noire */ cross-fade(url(white.png), url(black.png), 75%); /* 75% blanche, 25% noire */ @@ -98,7 +93,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ <h4 id="CSS_2">CSS</h4> -<pre class="brush: css; highlight[4-11] notranslate">.crossfade { +<pre class="brush: css">.crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( @@ -113,7 +108,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="crossfade"></div></pre> +<pre class="brush: html"><div class="crossfade"></div></pre> <h4 id="Résultat_2">Résultat</h4> @@ -158,7 +153,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ <li>{{cssxref("url")}}</li> <li>{{cssxref("_image", "image()")}}</li> <li>{{cssxref("image-set")}}</li> - <li>{{cssxref("element")}}</li> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS" title="Using gradients">Utiliser les dégradés CSS</a></li> + <li>{{cssxref("element()")}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients" title="Using gradients">Utiliser les dégradés CSS</a></li> <li>Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},</li> </ul> |