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 --- .../css/css_images/using_css_gradients/index.html | 112 +++++++-------------- 1 file changed, 38 insertions(+), 74 deletions(-) (limited to 'files/fr/web/css/css_images/using_css_gradients') diff --git a/files/fr/web/css/css_images/using_css_gradients/index.html b/files/fr/web/css/css_images/using_css_gradients/index.html index 5b836a6e21..6826ef0070 100644 --- a/files/fr/web/css/css_images/using_css_gradients/index.html +++ b/files/fr/web/css/css_images/using_css_gradients/index.html @@ -115,7 +115,7 @@ div {

L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, 0deg crée un dégradé vertical de bas en haut, tandis que 90deg génère un dégradé horizontal de la gauche vers la droite :

-

linear_redangles.png

+

background: linear-gradient(<angle>, red, white);
@@ -233,15 +233,13 @@ div {

Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à 50%:

- 
.striped {
    background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
@@ -253,17 +251,15 @@ div {
 
 
Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.

 
-
 
 
.multiposition-stops {
    background: linear-gradient(to left,
@@ -289,17 +285,15 @@ div {
 
 
Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.

 
-
 
 
.colorhint-gradient {
   background: linear-gradient(to top, black, 20%, cyan);
@@ -350,15 +344,13 @@ div {
 
 
De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.

 
-
 
 
.simple-radial {
   background: radial-gradient(red, blue);
@@ -371,15 +363,13 @@ div {
 
 
À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.

 
-
 
 
.radial-gradient {
   background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
@@ -392,15 +382,13 @@ div {
 
 
La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.

 
-
 
 
.radial-gradient {
   background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
@@ -417,15 +405,13 @@ div {
 
 
Dans l'exemple qui suit, on utilise la valeur closest-side pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.

 
-
 
 
.radial-ellipse-side {
   background: radial-gradient(ellipse closest-side,
@@ -439,15 +425,13 @@ div {
 
 
Cet exemple ressemble fortement au précédent mais on utilise ici farthest-corner qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.

 
-
 
 
.radial-ellipse-far {
   background: radial-gradient(ellipse farthest-corner,
@@ -461,15 +445,13 @@ div {
 
 
Pour cet exemple, on utilise closest-side qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.

 
-
 
 
.radial-circle-close {
   background: radial-gradient(circle closest-side,
@@ -483,15 +465,13 @@ div {
 
 
À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.

 
-
 
 
.stacked-radial {
   background:
@@ -523,15 +503,13 @@ div {
 
 
Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :

 
-
 
 
.simple-conic {
   background: conic-gradient(red, blue);
@@ -546,15 +524,13 @@ div {
 
 
À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé at.

 
-
 
 
.conic-gradient {
   background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
@@ -567,15 +543,13 @@ div {
 

 
Modifier l’angle

 
-
 
 
.conic-gradient {
   background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
@@ -595,15 +569,13 @@ div {
 
 
Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.

 
-
 
 
.repeating-linear {
   background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
@@ -614,15 +586,13 @@ div {
 
 
Répéter plusieurs dégradés linéaires

 
-
 
 
.multi-repeating-linear {
   background:
@@ -646,14 +616,12 @@ div {
 
 
Créer un tartan

 
-
 
 
.plaid-gradient {
   background:
@@ -682,15 +650,13 @@ div {
 
 
Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.

 
-
 
 
.repeating-radial {
   background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
@@ -701,15 +667,13 @@ div {
 
 
Répéter plusieurs dégradés radiaux

 
-
 
 
.multi-target {
   background:
@@ -743,6 +707,6 @@ div {
    
  • {{cssxref("background")}}, {{cssxref("background-image")}}
    • 
   
  
- 
  • Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou
    • 
+ 
  • Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou
    • 
  
  • Un générateur de dégradé CSS
    • 
 
-- 
cgit v1.2.3-54-g00ecf