Degradé pas à pas

**dirty_harry** · 15/07/2009, 12h32

Bonjour a tous,
Mon problème ne relève pas du CSS mais de la palette couleur, en faite je voudrais savoir comment incrémenter les couleurs pour obtenir un dégrader assez uniforme (par exemple du vert foncé au vert clair). J'aimerais mettre la couleur initial dans une variable et pouvoir l'incrémenter tant que nécessaire, en faite c'est pour colorier des 'carré' et je ne sais pas combien il y'en aura à l'avance alors je ne peux pas remplir un tableau avec toutes les couleurs pré-enregistrés. J'ai l'impression qu'il faut avancer de 2 en 2 mais je ne sais pas vraiment dire et le design ben... c'est pas mon truc

merci d'avance pour votre aide .

FoxLeRenard · 16/07/2009, 01h20

Bonjour,

Ta question est vague, car on ne sait pas trop ce que tu va accepter d'avoir et pour quelle utilisation ?
Selon tes précisions ta discution sera déplacée sur le bon forum.

Alors
acceptes tu une version javascript ?
ou veux tu une tables avec plein de TD ayant unbackground généré par du PHP
ça va servir a quoi ?
sous quelle présentation vois-tu cela.

Les couleurs ne peuvent utiliser une incrémentation de xx a cause de leur définition.

**dirty_harry** · 16/07/2009, 10h59

et bien en faite c'est pour un graphique réalisé grâce a une bibliothèque PHP , j'ai plusieurs série pour faire un nuage de point et l'on doit distingué deux catégorie bien distingue, il y aura par exemple les triangles pour l'une des carrés pour l'autre, cependant il faut des dégradés par exemples des carrées allant du vert au vert clairs et des triangles allant du bleu marine au bleu turquoise pour différencié chaque serie, peu etre que la méthode d'incrémentation est plus dans le PHP pour la gestion des caractère Hexadécimaux maisje voulais savoir comment passer 'manuelement' et 'en douceur' du vert clair au vert foncé. voila mon objectif.

FoxLeRenard · 16/07/2009, 11h48

Envoyé par dirty_harry

et bien en faite c'est pour un graphique réalisé grâce a une bibliothèque PHP , j'ai plusieurs série pour faire un nuage de point et l'on doit distingué deux catégorie bien distingue, il y aura par exemple les triangles pour l'une des carrés pour l'autre, cependant il faut des dégradés par exemples des carrées allant du vert au vert clairs et des triangles allant du bleu marine au bleu turquoise pour différencié chaque serie, peu etre que la méthode d'incrémentation est plus dans le PHP pour la gestion des caractère Hexadécimaux maisje voulais savoir comment passer 'manuelement' et 'en douceur' du vert clair au vert foncé. voila mon objectif.

Ne pas s' y tromper, c'est pas simple, choisi deux teintes extrémes, puis appliques un gradiant dans ton outil de dessin !

tu obtient alors une image de fond pour chacune de tes zones

Voici un excelent outil javascript a tester sous IE (je doute qu'il marche ailleur ?)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
 
<HTML>
<STYLE type=text/css>TD {
	FONT-SIZE: 14px
}
.outerSlideContainer {
	BORDER-RIGHT: buttonface 1px inset; BORDER-TOP: buttonface 1px inset; MARGIN-LEFT: 10px; BORDER-LEFT: buttonface 1px inset; WIDTH: 300px; BORDER-BOTTOM: buttonface 1px inset; HEIGHT: 20px
}
.sliderHandle {
	BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; FONT-SIZE: 12px; BACKGROUND: buttonface; OVERFLOW: hidden; BORDER-LEFT: white 2px outset; WIDTH: 33px; BORDER-BOTTOM: white 2px outset; HEIGHT: 18px; TEXT-ALIGN: center
}
.lineContainer {
	WIDTH: 298px; POSITION: absolute; HEIGHT: 18px
}
.line {
	FILTER: alpha(style=1); OVERFLOW: hidden; WIDTH: 298px; POSITION: relative; HEIGHT: 18px
}
#colorBox {
	BORDER-RIGHT: buttonface 1px inset; BORDER-TOP: buttonface 1px inset; BORDER-LEFT: buttonface 1px inset; WIDTH: 50px; BORDER-BOTTOM: buttonface 1px inset; HEIGHT: 50px
}
</STYLE>
 
<SCRIPT>
///////////////////////////////////////////////////////////////////////
//     This slidebar script was designed by Erik Arvidsson for WebFX //
///////////////////////////////////////////////////////////////////////
 
var dragobject = null;
var type;
var onchange = "";
var tx;
var ty;
 
 
function getReal(el, type, value) {
	temp = el;
	while ((temp != null) && (temp.tagName != "BODY")) {
		if (eval("temp." + type) == value) {
			el = temp;
			return el;
		}
		temp = temp.parentElement;
	}
	return el;
}
 
function moveme_onmousedown() {
	var tmp = getReal(window.event.srcElement, "className", "sliderHandle");	//Traverse the element tree
	if(tmp.className == "sliderHandle") {
		dragobject = tmp;			//This is a global reference to the current dragging object
 
		onchange = dragobject.getAttribute("onchange");	//Set the onchange function
		if (onchange == null) onchange = "";
		type = dragobject.getAttribute("type");			//Find the type
 
		if (type=="y")		//Vertical
			ty = (window.event.clientY - dragobject.style.pixelTop);
		else				//Horizontal
			tx = (window.event.clientX - dragobject.style.pixelLeft);
 
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
	else {
		dragobject = null;	//Not draggable
	}	
}
 
function moveme_onmouseup() {
	if(dragobject) {
		dragobject = null;
	}
}
 
function moveme_onmousemove() {
	if(dragobject) {
		if (type=="y") {
			if(event.clientY >= 0) {
				if ((event.clientY - ty >= 0) && (event.clientY - ty <= dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight)) {
					dragobject.style.top = event.clientY - ty;
				}
				if (event.clientY - ty < 0) {
					dragobject.style.top = "0";
				}
				if (event.clientY - ty > dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight - 0) {
					dragobject.style.top = dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight;
				}
 
				dragobject.value = dragobject.style.pixelTop / (dragobject.parentElement.style.pixelHeight - dragobject.style.pixelHeight);
				eval(onchange.replace(/this/g, "dragobject"));
			}
		}
		else {
			if(event.clientX  >= 0) {
				if ((event.clientX  - tx >= 0) && (event.clientX - tx <= dragobject.parentElement.clientWidth - dragobject.style.pixelWidth)) {
					dragobject.style.left = event.clientX - tx;
				}
				if (event.clientX - tx < 0) {
					dragobject.style.left = "0";
				}
				if (event.clientX - tx > dragobject.parentElement.clientWidth - dragobject.style.pixelWidth - 0) {
					dragobject.style.left = dragobject.parentElement.clientWidth - dragobject.style.pixelWidth;
				}
 
				dragobject.value = dragobject.style.pixelLeft / (dragobject.parentElement.clientWidth - dragobject.style.pixelWidth);
				eval(onchange.replace(/this/g, "dragobject"));
			}
		}
 
 
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	} 
}
 
function setValue(el, val) {
	el.value = val;
	if (el.getAttribute("TYPE") == "x")
		el.style.left =  val * (el.parentElement.clientWidth - el.style.pixelWidth);
	else
		el.style.top =  val * (el.parentElement.clientHeight - el.style.pixelHeight);
 
	eval(el.onchange.replace(/this/g, "el"))
}
 
document.onmousedown = moveme_onmousedown;
document.onmouseup = moveme_onmouseup;
document.onmousemove = moveme_onmousemove;
 
document.write('<style type="text/css">\
				.sliderHandle	{position: relative; cursor: default;}\
				</style>');
<!--
 
function update(el) {
	var red   = Math.round(255*redSlider.value);
	var green = Math.round(255*greenSlider.value);
	var blue  = Math.round(255*blueSlider.value);
 
	var color = "RGB(" + red + "," + green + "," + blue + ")";
 
	colorBox.style.backgroundColor = color;
	redSlider.innerHTML = red;
	greenSlider.innerHTML = green;
	blueSlider.innerHTML = blue;
 
	redLeft.style.background = "RGB(" + 0 + "," + green + "," + blue + ")";
	redRight.style.background = "RGB(" + 255 + "," + green + "," + blue + ")";
	greenLeft.style.background = "RGB(" + red + "," + 0 + "," + blue + ")";
	greenRight.style.background = "RGB(" + red + "," + 255 + "," + blue + ")";
	blueLeft.style.background = "RGB(" + red + "," + green + "," + 0 + ")";
	blueRight.style.background = "RGB(" + red + "," + green + "," + 255 + ")";
	rgb.hex.value=RGBtoHex(red,green,blue);
}
 
function init() {
	setValue(redSlider, 0.5);
	setValue(greenSlider, 0.5);
	setValue(blueSlider, 0.5);
}
 
//-->
</SCRIPT>
 
<SCRIPT language=JavaScript>
<!--
function RGBtoHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(N) {
 if (N==null) return "00";
 N=parseInt(N); if (N==0 || isNaN(N)) return "00";
 N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
 return "0123456789ABCDEF".charAt((N-N%16)/16)
      + "0123456789ABCDEF".charAt(N%16);
}
//-->
</SCRIPT>
 
<META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD>
<BODY text=#ffffff vLink=#551a8b aLink=#ff0000 link=#000080 bgColor=#000080 
onload=init()>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV><B><FONT size=+1>Code RGB des couleurs</FONT></B></DIV>
<DIV>Superbe script pour trouver les valeurs RGB des couleurs [Author: Erik 
Arvidsson]</DIV>
<DIV>Amélioré pour traduction simultanée en Hexa </DIV>
<UL>
  <UL>
    <TABLE>
      <TBODY>
      <TR>
        <TD align=right>Red:</TD>
        <TD><SPAN class=outerSlideContainer>
          <DIV class=lineContainer id=redRight style="BACKGROUND: rgb(255,0,0)">
          <DIV class=line id=redLeft style="BACKGROUND: rgb(0,0,0)"></DIV></DIV>
          <DIV class=sliderHandle id=redSlider type="x" value="0" 
          onchange="update(this)">0 </DIV></SPAN></TD>
        <TD vAlign=center align=middle rowSpan=3>
          <DIV id=colorBox></DIV></TD></TR>
      <TR>
        <TD align=right>Green:</TD>
        <TD><SPAN class=outerSlideContainer>
          <DIV class=lineContainer id=greenRight 
          style="BACKGROUND: rgb(0,255,0)">
          <DIV class=line id=greenLeft 
          style="BACKGROUND: rgb(0,0,0)"></DIV></DIV>
          <DIV class=sliderHandle id=greenSlider type="x" value="0" 
          onchange="update(this)">0 </DIV></SPAN></TD></TR>
      <TR>
        <TD align=right>Blue:</TD>
        <TD><SPAN class=outerSlideContainer>
          <DIV class=lineContainer id=blueRight 
style="BACKGROUND: rgb(0,0,255)">
          <DIV class=line id=blueLeft 
style="BACKGROUND: rgb(0,0,0)"></DIV></DIV>
          <DIV class=sliderHandle id=blueSlider type="x" value="0" 
          onchange="update(this)">0 </DIV></SPAN></TD></TR>
      <TR>
        <TD></TD>
        <TD align=middle>
          <FORM name=rgb><INPUT id=hex size=8 name=hex> 
    </FORM></TD></TR></TBODY></TABLE></UL></UL></BODY></HTML>

**devyan** · 16/07/2009, 20h51

Salut,

Tu peux essayer de décomposer tes 2 couleurs (celle de début et celle de fin) en RGB (#RRGGBB)

Ensuite, tu dois pouvoir incrémenter (décrémenter) chacune des composantes pour aller d'une des couleurs à l'autre en fonction du nombre d'éléments que tu auras à afficher (je suppose qu'à ce moment là tu devrais savoir combien il y en a)

devyan.

FoxLeRenard · 16/07/2009, 23h35

Envoyé par devyan

Salut,

Tu peux essayer de décomposer tes 2 couleurs (celle de début et celle de fin) en RGB (#RRGGBB)

Ensuite, tu dois pouvoir incrémenter (décrémenter) chacune des composantes pour aller d'une des couleurs à l'autre en fonction du nombre d'éléments que tu auras à afficher (je suppose qu'à ce moment là tu devrais savoir combien il y en a)

devyan.

Oui oui, mais décrémenter regardes le code de mon javascripte tu comprendra que c'est pas du genre -x

Degradé pas à pas

CSS

Vue hybride

Discussions similaires

Partager

Partager