Générateur de dégradés

Soyez le premier à donner votre avis sur cette source.

Snippet vu 17 265 fois - Téléchargée 17 fois

Contenu du snippet

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 / Exemple :


<!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 ! ;)

A voir également

Ajouter un commentaire

Commentaires

Mrreivax
Messages postés
104
Date d'inscription
mercredi 9 juin 2004
Statut
Membre
Dernière intervention
26 juin 2010
1
pas mal ton script!
jantosze
Messages postés
72
Date d'inscription
mercredi 29 mai 2013
Statut
Membre
Dernière intervention
15 mai 2009

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
jantosze
Messages postés
72
Date d'inscription
mercredi 29 mai 2013
Statut
Membre
Dernière intervention
15 mai 2009

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

cdt
JAN
proftnj
Messages postés
54
Date d'inscription
lundi 10 juillet 2006
Statut
Membre
Dernière intervention
11 septembre 2011

'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).
macsou01
Messages postés
45
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
28 juillet 2011

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 ! ;)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.