GÉNÉRATEUR DE DÉGRADÉS dégradé, générateur, gradient, Source N°45727

Information sur la source

Catégorie :Graphique Classé sous : dégradé, générateur, gradient Niveau : Initié Date de création : 12/02/2008 Date de mise à jour : 12/02/2008 23:26:30 Vu : 6 771

Auteur : macsou01

Site perso

Ecrire un message privé

Note :

10,00 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (6)

Ajouter un commentaire et/ou une note

Description

Ce script permet de faire des dégradés.
Leur création est très simple : une couleur de départ, une couleur de fin, quelques autres paramètres et le dégradé est prêt à être généré.
Ce script est compatible avec Firefox 2 et 3, IE 7 ( IE 6 non testé ), Opera 9 et Safari 3 ( sous Windows ).

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>Générateur de dégradés</title>
<script type="text/javascript">
<!--
function gradient() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var width = document.getElementById('width').value;
var height = document.getElementById('height').value;
var ropacity = document.getElementById('ropacity').value;
var rheight = 100/document.getElementById('rheight').value;
var rcolor = document.getElementById('rcolor').value;
if (ropacity > 100 ) {
ropacity = 100;
document.getElementById('ropacity').value = 100;
}
if (rheight < 1 ) {
rheight = 1;
document.getElementById('rheight').value = 100;
}
var gbase = document.getElementById('gbase');
gbase.innerHTML = '<div style="width:'+ width +'px; height:'+ height/rheight +'px; margin-bottom:'+ height/-rheight +'px; background-color:'+ rcolor +'; opacity:' + ropacity/100 +'; filter:alpha(opacity='+ ropacity +');"></div>';
gbase.style.height = height + 'px';
gbase.style.width = width + 'px';
gbase.style.background = start;
gbase.style.border = 'solid 1px #4F4F4F';
if(document.getElementById('vertical').checked == true) {
for(i = 0; i < height; i++) {
var g = document.createElement('div');
g.style.height = '1px';
g.style.width = width + 'px';
g.style.background = end;
g.style.opacity = (i/height);
g.style.filter = 'alpha(opacity=' + i/(height/100) + ')';
document.getElementById('gbase').appendChild(g);
}
}
else {
for(i = 0; i < width; i++) {
var g = document.createElement('div');
g.style.cssText = 'float:left;';
g.style.height = height + 'px';
g.style.width = '1px';
g.style.background = end;
g.style.opacity = i/width;
g.style.filter = 'alpha(opacity=' + i/(width/100) + ')';
document.getElementById('gbase').appendChild(g);
}
}
document.getElementById('submit').value = 'OK';
}
// -->
</script>
</head>
<body>
<form method="post" style="margin:0px; padding:0px;" action="javascript:;">
<p>
<label>Première couleur</label><br/>
<input type="text" value="#C7D3D8" id="start"/><br/>
<label>Deuxième couleur</label><br/>
<input type="text" value="#57727D" id="end"/><br/>
<label>Opacité du reflet ( en % )</label><br/>
<input type="text" value="50" id="ropacity"/><br/>
<label>Hauteur du reflet ( en % )</label><br/>
<input type="text" value="45" id="rheight"/><br/>
<label>Couleur du reflet</label><br/>
<input type="text" value="#FFFFFF" id="rcolor"/><br/>
<label>Largeur ( en pixels )</label><br/>
<input type="text" value="350" id="width"/><br/>
<label>Hauteur ( en pixels )</label><br/>
<input type="text" value="100" id="height"/><br/>
<label>Sens du dégradé</label><br/>
<input checked="checked" type="radio" id="vertical" name="gmode"/><label for="vertical">Vertical</label>
<input type="radio" id="horizontal" name="gmode"/><label for="horizontal">Horizontal</label><br/><br/>
<input type="submit" value="OK" id="submit" onclick="this.value='Chargement...'; setTimeout(function() { gradient(); }, 0);"/>
</p>
</form>
<div id="gbase">
<p>Cliquez sur OK pour créer le dégradé.</p>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
		<title>Générateur de dégradés</title>
		<script type="text/javascript">
		<!--
			function gradient() {
				var start = document.getElementById('start').value;
				var end = document.getElementById('end').value;
				var width = document.getElementById('width').value;
				var height = document.getElementById('height').value;
				var ropacity = document.getElementById('ropacity').value;
				var rheight = 100/document.getElementById('rheight').value;
				var rcolor = document.getElementById('rcolor').value;
				if (ropacity > 100 ) {
					ropacity = 100;
					document.getElementById('ropacity').value = 100;
				}
				if (rheight < 1 ) {
					rheight = 1;
					document.getElementById('rheight').value = 100;
				}
				var gbase = document.getElementById('gbase');
				gbase.innerHTML = '<div style="width:'+ width +'px; height:'+ height/rheight +'px; margin-bottom:'+ height/-rheight +'px; background-color:'+ rcolor +'; opacity:' + ropacity/100 +'; filter:alpha(opacity='+ ropacity +');"></div>';
				gbase.style.height = height + 'px';
				gbase.style.width = width + 'px';
				gbase.style.background = start;
				gbase.style.border = 'solid 1px #4F4F4F';
				if(document.getElementById('vertical').checked == true) {
					for(i = 0; i < height; i++) {
						var g = document.createElement('div');
						g.style.height = '1px';
						g.style.width = width + 'px';
						g.style.background = end;
						g.style.opacity = (i/height);
						g.style.filter = 'alpha(opacity=' + i/(height/100) + ')';
						document.getElementById('gbase').appendChild(g);
					}
				}
				else {
					for(i = 0; i < width; i++) {
						var g = document.createElement('div');
						g.style.cssText = 'float:left;';
						g.style.height = height + 'px';
						g.style.width = '1px';
						g.style.background = end;
						g.style.opacity = i/width;
						g.style.filter = 'alpha(opacity=' + i/(width/100) + ')';
						document.getElementById('gbase').appendChild(g);
					}
				}
				document.getElementById('submit').value = 'OK';
			}
		// -->
		</script>
	</head>
	<body>				
		<form method="post" style="margin:0px; padding:0px;" action="javascript:;">
			<p>
				<label>Première couleur</label><br/>
				<input type="text" value="#C7D3D8" id="start"/><br/>
				<label>Deuxième couleur</label><br/>
				<input type="text" value="#57727D" id="end"/><br/>
				<label>Opacité du reflet ( en % )</label><br/>
				<input type="text" value="50" id="ropacity"/><br/>
				<label>Hauteur du reflet ( en % )</label><br/>
				<input type="text" value="45" id="rheight"/><br/>
				<label>Couleur du reflet</label><br/>
				<input type="text" value="#FFFFFF" id="rcolor"/><br/>
				<label>Largeur ( en pixels )</label><br/>
				<input type="text" value="350" id="width"/><br/>
				<label>Hauteur ( en pixels )</label><br/>
				<input type="text" value="100" id="height"/><br/>
				<label>Sens du dégradé</label><br/>
				<input checked="checked" type="radio" id="vertical" name="gmode"/><label for="vertical">Vertical</label>
				<input type="radio" id="horizontal" name="gmode"/><label for="horizontal">Horizontal</label><br/><br/>
				<input type="submit" value="OK" id="submit" onclick="this.value='Chargement...'; setTimeout(function() { gradient(); }, 0);"/>
			</p>
		</form>
		<div id="gbase">
			<p>Cliquez sur OK pour créer le dégradé.</p>
		</div>
	</body>
</html>

Conclusion

Je ne pense pas que ça soit la manière la plus simple pour créer un dégradé en javascript, mais ce script fonctionne bien sous la plupart des navigateurs et est assez rapide.
Bon codage ! ;)

Historique

12 février 2008 23:26:30 :: Rajout de  autour du code javascript pour assurer la validation de la page.

Sources du même auteur

Toutes les sources de macsou01

Sources de la même categorie

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

Commentaires

Commentaire de Mrreivax le 12/02/2008 21:10:06

pas mal ton script!
Commentaire de jantosze le 13/02/2008 15:15:49

Salut,
Je te propose la structuration des 2 boucles For suivantes:
/**/
var g = document.createElement('div');
g.style.cssText = 'float:left;';
g.style.background = end;
if(document.getElementById('vertical').checked == true) {
g.style.height = '1px';
g.style.width = width + 'px';
borne = height;
}else {
g.style.height = height + 'px';
g.style.width = '1px';
borne= width;
}
for(i=0; i < borne ;i ++){
g.style.opacity = i/borne;
g.style.filter = 'alpha(opacity=' + i/(borne/100) + ')';
document.getElementById('gbase').appendChild(g);
}
/**/
Bien que testé sur FireFox 3, penses tu que cela soit fonctionnellement viable ?
Cdt
JAN
Commentaire de jantosze le 13/02/2008 15:56:24

Sorry, il y a effectivement un problème sur ma formulation.

cdt
JAN
Commentaire de proftnj le 18/02/2008 17:54:31

'filter:alpha' fonctionne sous Mozilla Firefox ?
Il y a un truc dans ce script qui m'échappe !
Script étonnant (du moins pour moi, pauvre nouille que je suis).
Commentaire de macsou01 le 18/02/2008 18:28:25

Non filter ne fonctionne pas sous firefox ( seulement sous IE ) mais je l'utilise en parallèle avec opacity ( qui ne marche pas sous IE ) pour que le script soit compatible avec IE et les autres navigateurs ! ;)
Commentaire de proftnj le 18/02/2008 19:45:42

Il me reste à remplacer "-moz-opacity" par "opacity" dans de nombreux scripts que j'utilise, alors.

J'ai encore appris quelque chose :)

Ajouter un commentaire

Discussions en rapport avec ce code source

mini générateur ??? par Loser

Générateur de sommaire par socomajor

Dégradé de couleurs d'un texte pour outl.expr. par mamierok

faire un fond en dégradé par boss2000

[DEPLACE]Ecrire un mot en deux couleurs dégradé!!! par biddal

dégradé d'opacité sur du texte par Flachy Joe