diff --git a/files/fr/web/css/css_images/using_css_gradients/index.md b/files/fr/web/css/css_images/using_css_gradients/index.md index 45efddc6948792..3578549bd88cc6 100644 --- a/files/fr/web/css/css_images/using_css_gradients/index.md +++ b/files/fr/web/css/css_images/using_css_gradients/index.md @@ -1,17 +1,19 @@ --- title: Utilisation de dégradés CSS slug: Web/CSS/CSS_images/Using_CSS_gradients +l10n: + sourceCommit: f79a491594ebb5634949ed31b26155973a39166e --- {{CSSRef}} Les **dégradés CSS** sont représentés par le type de donnée [``](/fr/docs/Web/CSS/gradient) qui est un sous-ensemble du type [``](/fr/docs/Web/CSS/image). L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de dégradés : -- Les dégradés linéaires (créés avec la fonction [`linear-gradient()`]()), -- Les dégradés radiaux (créés avec la fonction [`radial-gradient()`]()), -- Les dégradés coniques (créés avec la fonction [`conic-gradient()`]()). +- Les dégradés linéaires (créés avec la fonction [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient)), +- Les dégradés radiaux (créés avec la fonction [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient)), +- Les dégradés coniques (créés avec la fonction [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient)). -Les dégradés peuvent être répétés avec les fonctions respectives [`repeating-linear-gradient()`](), [`repeating-radial-gradient()`]() et [`repeating-conic-gradient()`](). +Les dégradés peuvent être répétés avec les fonctions respectives [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient). Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). Les dégradés étant générés dynamiquement, ils permettent d'éviter d'utiliser des images matricielles pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible. @@ -25,23 +27,21 @@ Pour créer un dégradé linéaire, définissez un point de départ et une direc Pour définir un dégradé sous sa forme la plus simple, il suffit d'avoir deux couleurs. Celles-ci permettent de placer ce qu'on appellera des arrêts de couleur (color stops en anglais). Il est nécessaire d'en avoir au moins deux, mais il est possible d'en avoir plus. -#### HTML - -```html +```html hidden
``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .lineaire-simple { background: linear-gradient(blue, pink); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -52,23 +52,21 @@ div { Par défaut, les dégradés linéaires vont du haut vers le bas. Il est possible de changer leur orientation en indiquant une direction. -#### HTML - -```html +```html hidden
``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-horizontal { background: linear-gradient(to right, blue, pink); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -79,23 +77,21 @@ div { Il est également possible d'orienter le dégradé sur une diagonale allant d'un coin à un autre. -#### HTML - -```html +```html hidden
``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-diagonal { background: linear-gradient(to bottom right, blue, pink); } - -div { - width: 200px; - height: 100px; -} ``` #### Résultat @@ -106,23 +102,21 @@ div { Si on veut choisir plus précisément la direction, on pourra fournir un angle au dégradé. -#### HTML - -```html +```html hidden
``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-angulaire { background: linear-gradient(70deg, blue, pink); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -131,7 +125,7 @@ div { L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens 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. Les valeurs négatives font progresser l'angle dans le sens inverse des aiguilles d'une montre : -![](linear_red_angles.png) +![Quatre carrés indiquant les angles avec les dégradés correspondants dessinés sur chaque. On y voit que le carré avec 0 degré a un dégradé du rouge vers le blanc de bas en haut, celui avec 90 degrés de gauche à droite, celui 180 degrés de haut en bas et celui de -90 degrés de droite à gauche.](linear_red_angles.png) ## Créer des effets et manipuler les couleurs @@ -141,23 +135,21 @@ L'ensemble des types de dégradés CSS sont décrits par une suite de couleurs a Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité. Par défaut, les couleurs sont espacées de façon homogène : -#### HTML - -```html +```html hidden
``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-espacement-auto { background: linear-gradient(red, yellow, blue, orange); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -168,23 +160,21 @@ div { Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme de zéro, un ou deux pourcentages de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, `0%` indique le point de départ, et `100%` le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré. Si une position n'est pas définie, la position de cet arrêt de couleur sera automatiquement calculée (par défaut le premier arrêt est situé à 0%, le dernier à 100% et les autres répartis de façon homogène par rapport à leurs voisins). -#### HTML - -```html +```html hidden
``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .degrade-multicolore { background: linear-gradient(to left, lime, lime 28px, red 77%, cyan); } - -div { - width: 120px; - height: 120px; -} ``` #### Résultat @@ -195,20 +185,18 @@ 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%` : -#### HTML - -```html +```html hidden
``` -#### CSS - -```css +```css hidden div { width: 120px; height: 120px; } +``` +```css .ligne-franche { background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); } @@ -222,23 +210,21 @@ div { Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe. -#### HTML - -```html +```html hidden
``` -#### CSS - -```css +```css hidden div { width: 120px; height: 120px; float: left; margin-right: 10px; } +``` +```css .indication-couleur { background: linear-gradient(blue, 10%, pink); } @@ -312,7 +298,7 @@ div { {{EmbedLiveSample("", 150, 150)}} -Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc. +Dans le premier exemple ci-dessus, le vert citron commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan, le cyan restera vif pendant 15%, et ainsi de suite. Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives. @@ -352,24 +338,22 @@ div { Les dégradés gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple : -#### HTML - -```html +```html hidden
``` -#### CSS +```css hidden +div { + width: 300px; + height: 150px; +} +``` ```css .superposition { background: linear-gradient(to right, transparent, mistyrose), url("critters.png"); } - -div { - width: 300px; - height: 150px; -} ``` #### Résultat @@ -380,13 +364,16 @@ div { Il est possible d'empiler différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures. -#### HTML - -```html +```html hidden
``` -#### CSS +```css hidden +div { + width: 120px; + height: 120px; +} +``` ```css .linear-gradient { @@ -397,11 +384,6 @@ Il est possible d'empiler différents dégradés. Il suffit que les dégradés s ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%); } - -div { - width: 200px; - height: 200px; -} ``` #### Résultat @@ -414,9 +396,7 @@ Les dégradés radiaux sont similaires aux dégradés linéaires mais permettent ### Un dégradé radial simple -> **Note :** Dans les exemples suivants, nous continuons d'utiliser le même [`
`](/fr/docs/Web/HTML/Element/div) et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé. - -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. +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. Par défaut, le centre du degradé se situe à la position 50% 50% et le dégradé a la forme d'une ellipse qui correspond aux proportions de sa boîte englobante : ```html hidden
@@ -514,7 +494,7 @@ div { } ``` -{{EmbedLiveSample("", 270, 130)}} +{{EmbedLiveSample("utiliser_closest-side_pour_les_ellipses", 270, 130)}} #### Utiliser `farthest-corner` pour les ellipses @@ -543,7 +523,7 @@ div { } ``` -{{EmbedLiveSample("", 240, 130)}} +{{EmbedLiveSample("utiliser_farthest-corner_pour_les_ellipses", 240, 130)}} #### Utiliser `closest-side` pour les cercles @@ -572,7 +552,7 @@ div { } ``` -{{EmbedLiveSample("", 240, 150)}} +{{EmbedLiveSample("utiliser_closest-side_pour_les_cercles", 240, 150)}} #### Longueur ou pourcentage pour le dimensionnement des ellipses @@ -601,7 +581,7 @@ div { } ``` -{{EmbedLiveSample('', 240, 150)}} +{{EmbedLiveSample('longueur_ou_pourcentage_pour_le_dimensionnement_des_ellipses', 240, 150)}} #### Longueur pour le dimensionnement des cercles @@ -624,7 +604,7 @@ div { } ``` -{{EmbedLiveSample('', 240, 150)}} +{{EmbedLiveSample('longueur_pour_le_dimensionnement_des_cercles', 240, 150)}} ### Empiler des dégradés radiaux @@ -667,7 +647,7 @@ div { ## Dégradés coniques -La fonction **`conic-gradient()`** permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs. +La fonction [CSS](/fr/docs/Web/CSS) **`conic-gradient()`** permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des [cercles chromatiques](/fr/docs/Glossary/Color_wheel). La syntaxe de `conic-gradient()` est semblable à celle de `radial-gradient()` mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues. @@ -752,13 +732,13 @@ div { ## Répéter des dégradés -Les propriétés [`linear-gradient()`](), [`radial-gradient()`]() et [`conic-gradient()`]() ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions [`repeating-linear-gradient()`](), [`repeating-radial-gradient()`]() et [`repeating-conic-gradient()`]() offrent cette fonctionnalité. +Les propriétés [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient), [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient) et [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient) ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient) offrent cette fonctionnalité. -La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Si aucun n'est déclaré, la ligne du dégradé occupera 100%, ce qui signifie que les dégradés linéaires et coniques ne se répèteront pas et que le dégradé radial ne se répètera que si le rayon du dégradé est plus petit que la distance entre le centre du dégradé et le coin le plus proche. Si le premier arrêt de couleur est déclaré et que la valeur est supérieure à 0, le dégradé se répètera, car la taille de la ligne ou de l'arc est donnée par la différence entre le premier et le dernier arrêt de couleur, qui vaudra alors ici moins de 100% ou 360 degrés. +La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Si aucun n'est déclaré, la ligne du dégradé occupera 100%, ce qui signifie que les dégradés linéaires et coniques ne se répèteront pas et que le dégradé radial ne se répètera que si le rayon du dégradé est plus petit que la distance entre le centre du dégradé et le coin le plus éloigné. Si le premier arrêt de couleur est déclaré et que la valeur est supérieure à 0, le dégradé se répètera, car la taille de la ligne ou de l'arc est donnée par la différence entre le premier et le dernier arrêt de couleur, qui vaudra alors ici moins de 100% ou 360 degrés. ### Répéter un dégradé linéaire -Dans cet exemple, on utilise la fonction [`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. +Dans cet exemple, on utilise la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/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. ```html hidden
@@ -888,6 +868,33 @@ div { 63, 0.25 ) 5px, rgba(143, 77, 63, 0.25) 10px); + + background: repeating-linear-gradient( + 90deg, + transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px + ), repeating-linear-gradient( + 0deg, + transparent 0 50px, + rgba(255, 127, 0, 0.25) 50px 56px, + transparent 56px 63px, + rgba(255, 127, 0, 0.25) 63px 69px, + transparent 69px 116px, + rgba(255, 206, 0, 0.25) 116px 166px + ), repeating-linear-gradient( + -45deg, + transparent 0 5px, + rgba(143, 77, 63, 0.25) 5px 10px + ), repeating-linear-gradient(45deg, transparent 0 5px, rgba( + 143, + 77, + 63, + 0.25 + ) 5px 10px); } ``` @@ -895,7 +902,7 @@ div { ### Répéter des dégradés radiaux -Ici, on utilise la fonction [`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. +Ici, on utilise la fonction [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/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. ```html hidden
@@ -963,12 +970,12 @@ div { - Les fonctions de manipulation des dégradés : - - [`linear-gradient`]() - - [`radial-gradient`]() - - [`conic-gradient`]() - - [`repeating-linear-gradient`]() - - [`repeating-radial-gradient`]() - - [`repeating-conic-gradient`]() + - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient) + - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient) + - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient) + - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient) + - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) + - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient) - Les types de donnée CSS relatifs aux dégradés : @@ -981,4 +988,5 @@ div { - [`background-image`](/fr/docs/Web/CSS/background-image) - [Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou](https://lea.verou.me/css3patterns/) +- [Une bibliothèque de motifs de dégragés, par Estelle Weyl](https://standardista.com/cssgradients/) - [Un générateur de dégradé CSS](https://cssgenerator.org/gradient-css-generator.html)