Générateur de dégradés

Soyez le premier à donner votre avis sur cette source.

Snippet vu 17 400 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
Messages postés
2
Date d'inscription
mercredi 27 février 2013
Statut
Membre
Dernière intervention
27 février 2013

Merci, Super comme script!
Messages postés
45
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
28 juillet 2011

Heureux d'avoir pu vous être utile ! ;)
Messages postés
5
Date d'inscription
dimanche 2 janvier 2005
Statut
Membre
Dernière intervention
23 janvier 2011

Tout simplement formidable.
- Par la simplicité
- l'économie de code
- l'utilisation de l'UC

.Il est même possible d'écrire du texte par dessus, pour faire des fonds de cellule<TD> avec texte, dans les <TABLE>.

Merci d'avoir fait cela.
Messages postés
140
Date d'inscription
mercredi 18 juin 2008
Statut
Membre
Dernière intervention
1 novembre 2009

Petite rectification : la déclaration de newOpacity est inutile, on peut mettre la division directement dans la méthode animate():
$("#line"+nbLine).animate({opacity: nbLine / maxLine});

Ca fait gagner 2 lignes...

Pour l'appel de la fonction gradient():

gradient(myDiv, myFirstColor, myDivLastColor, myDir)

myDiv : identifiant du div à remplir
myFirstColor : l'argument est inutile ici, le background original du div à remplir peut être défini dans le css. Donc à supprimer..
myDivLastColor : Couleur du dégradé
myDir : "X" ou "Y" pour verticale ou horizontal.

@+
Messages postés
140
Date d'inscription
mercredi 18 juin 2008
Statut
Membre
Dernière intervention
1 novembre 2009

Bonjour,

Sympa ce petit source :-) Je lui met 10 également, malgré le défaut d'une génération excessive de div. Une image de quelques octets avec 1px de width ou height, en background repeat donne l'équivalent et reste beaucoup plus léger. Néanmoins grâce à cette méthode on peut imaginer quelques dérivés, comme des animations par exemple. Je propose un petit équivalent via le plugin jquery :

function gradient(myDiv, myDivFirstColor, myDivLastColor, myDir)
{
var newLine;
var maxLine;
var newTop = 0;
var newLeft = 0;
var newOpacity = 1;
var myLineWidth = 1;
var myLineHeight = 1;
var myDivWidth = $("#" + myDiv).width();
var myDivHeight = $("#" + myDiv).height();

if (myDir == "X")
{
maxLine = myDivHeight;
myLineWidth = myDivWidth;
}

if (myDir == "Y")
{
maxLine = myDivWidth;
myLineHeight = myDivHeight;
}

for (nbLine = 0; nbLine < maxLine; nbLine++)
{
if (myDir == "X") newTop++;
if (myDir == "Y") newLeft++;

newLine = "

";

$("#" + myDiv).append(newLine);

newOpacity = nbLine / maxLine;

$("#line"+nbLine).animate({opacity: newOpacity});
}
}

Voilà, compatible tous navigateurs il me semble.

Merci!
Afficher les 11 commentaires

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.