Générateur de dégradés

Commenter

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

S'inscrire maintenant

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.

Du même auteur (macsou01)