-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
170 lines (138 loc) · 4.04 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
---
title: <gradient>
slug: Web/CSS/gradient
---
{{CSSRef}}
Le type de donnée CSS **`<gradient>`** permet de représenter une {{cssxref("<image>")}} contenant un dégradé entre deux ou plusieurs couleurs. Un dégradé CSS n'est pas une couleur CSS (type {{cssxref("<color>")}}) mais une image [sans dimension intrinsèque](/fr/docs/Web/CSS/image) (elle n'a aucune taille naturelle ou ratio), sa taille réelle sera celle de l'élément auquel elle est appliquée.
{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé `transparent` dans d'anciens navigateurs).
## Les types de dégradés
### Les dégradés linéaires
Ils sont générés à partir de la fonction {{cssxref("linear-gradient", "linear-gradient()")}} : la couleur évolue suivant un axe imaginaire :
```html hidden
A rainbow made from a gradient
```
```css
body {
background: -moz-linear-gradient(
left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background: -webkit-linear-gradient(
left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background: -ms-linear-gradient(
left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background: -o-linear-gradient(
left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
background: linear-gradient(
to right,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
```
{{EmbedLiveSample('Les_dégradés_linéaires', 600, 20)}}
### Les dégradés radiaux
Ils sont générés à partir de la fonction {{cssxref("radial-gradient", "radial-gradient()")}}. Plus on s'éloigne du point d'origine, plus la couleur varie par rapport à la couleur d'origine :
```html hidden
Radial gradient
```
```css
body {
background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll
0% 0% transparent;
background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
```
{{EmbedLiveSample('Les_dégradés_radiaux', 600, 20)}}
### Les dégradés répétés
Ce sont des dégradés linéaires de taille fixe ou des dégradés radiaux qui sont répétés autant que nécessaire pour remplir la boîte visée :
```html hidden
Repeating gradient
```
```css
body {
background: -moz-repeating-linear-gradient(
top left -45deg,
red,
red 5px,
white 5px,
white 10px
);
background: repeating-linear-gradient(
to top left,
red,
red 5px,
white 5px,
white 10px
);
}
```
{{EmbedLiveSample('Les_dégradés_répétés', 600, 20)}}
### Dégradé conique
Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient).
```html hidden
<div class="conic-gradient">Conic gradient</div>
```
```css hidden
div {
width: 200px;
height: 200px;
}
```
```css
.conic-gradient {
background: conic-gradient(lightpink, white, powderblue);
}
```
{{EmbedLiveSample('Dégradé_conique', 240, 80)}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- [Manipuler les dégradés CSS](/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS)
- {{cssxref("<gradient>")}}
- {{cssxref("conic-gradient", "conic-gradient()")}}
- {{cssxref("linear-gradient", "linear-gradient()")}}
- {{cssxref("radial-gradient", "radial-gradient()")}}
- {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}
- {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
- [Les types de donnée en CSS](/fr/docs/Web/CSS/Types_CSS)
- [Les unités et valeurs en CSS](/fr/docs/Web/CSS/Valeurs_et_unités_CSS)
- [Introduction à CSS : les unités et les valeurs](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units)