From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- files/fr/web/css/cross-fade()/index.html | 35 ++++++++++++++------------------ 1 file changed, 15 insertions(+), 20 deletions(-) (limited to 'files/fr/web/css/cross-fade()') 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()

La fonction CSS cross-fade() 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.

-
-

Attention ! À 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.

+
+

Attention : À 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.

-

Syntaxe (spécification)

+

Syntaxe (spécification)

La fonction cross-fade() 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%.

@@ -26,7 +26,7 @@ translation_of: Web/CSS/cross-fade()

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.

-
cross-fade(url(white.png)   0%, url(black.png) 100%); /* complètement noire */
+
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
 
 
Les lignes précédentes peuvent ainsi s'écrire également :

 
-
cross-fade(url(white.png)   0%, url(black.png)); /* complètement noire */
+
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
 
 
Syntaxe formelle

 
-
-
-{{csssyntax}}
-
-
    
-

+
{{csssyntax}}

 
 
Exemples

 
 
HTML

 
-
<div id="div"></div>

+
<div id="div"></div>

 
 
CSS

 
-
#div {
+
#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
 
 
Ancienne syntaxe (implémentations)

 
-
cross-fade( <image, <image>, <percentage> )

+
cross-fade( <image, <image>, <percentage> )

 
-
La spécification de la fonction cross-fade() permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, 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 -webkit- pour Chrome, Opera et les autres navigateurs basés sur Blink.

+
La spécification de la fonction cross-fade() permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, 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 -webkit- pour Chrome, Opera et les autres navigateurs basés sur Blink.

 
-
cross-fade(url(white.png), url(black.png), 0%);   /* complètement noire */
+
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 */
 
 
CSS

 
-
.crossfade {
+
.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 */
 
 
HTML

 
-
<div class="crossfade"></div>

+
<div class="crossfade"></div>

 
 
Résultat

 
@@ -158,7 +153,7 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
  
  • {{cssxref("url")}}
    • 
  
  • {{cssxref("_image", "image()")}}
    • 
  
  • {{cssxref("image-set")}}
    • 
- 
  • {{cssxref("element")}}
    • 
- 
  • Utiliser les dégradés CSS
    • 
+ 
  • {{cssxref("element()")}}
    • 
+ 
  • Utiliser les dégradés CSS
    • 
  
  • 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()")}},
    • 
 
-- 
cgit v1.2.3-54-g00ecf