begin process at 2010 02 10 12:05:09
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > GÉNÉRATEUR DE DÉGRADÉS

GÉNÉRATEUR DE DÉGRADÉS


 Information sur la source

Note :
10 / 10 - par 3 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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 :11 292
Auteur : macsou01

Ecrire un message privé
Site perso
Commentaire sur cette source (8)
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 <!-- et // --> autour du code javascript pour assurer la validation de la page.

 Sources du même auteur

Source avec Zip Source avec une capture FRACTALE DE MANDELBROT
Source avec Zip Source avec une capture CRÉER UN REFLET D'UNE IMAGE
Source avec Zip Source avec une capture DESSINER DES CERCLES/DISQUES/LIGNES EN JAVASCRIPT
Toutes les sources de macsou01

 Sources de la même categorie

Source avec Zip Source avec une capture STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard
MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture OGG MEDIA PLAYER par kazma
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

CARTAGE (30AVRIL2008) - FUSION EDITION par benoitmacier
Source avec Zip GENERATEUR DE PSEUDO MSN par BTAJV
Source avec Zip CRYPTAGE ET APPLICATION par abdelaziz_info
Source avec Zip ANNONCE ET PUBLICITÉ OU AUTRES INFORMATIONS AUTOMATIQUES par abdelaziz_info
Source avec Zip GÉNÉRATEUR DE NAVIGATEUR AVEC MENU par abdelaziz_info

Commentaires et avis

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

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 10/10

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

J'ai encore appris quelque chose :)

Commentaire de papymucho le 01/11/2009 18:11:17 10/10

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 = "<div id=\"line" + nbLine + "\" style=\"background:" + myDivLastColor + ";width:" + myLineWidth + "px;height:" + myLineHeight + "px;margin-top:" + newTop + "px;margin-left:" + newLeft + "px;position:absolute\"></div>";

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

newOpacity = nbLine / maxLine;

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


Voilà, compatible tous navigateurs il me semble.

Merci!

Commentaire de papymucho le 01/11/2009 18:24:53

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.

@+

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

mini générateur ??? [ par Loser ] Bonjour !je voudrais réaliser un générateur mais je sais pas comment m'y prendre :j'ai un premier textarea où on va entrer le texteensuite des checkbo Générateur de sommaire [ par socomajor ] Bonjour ! J'aimerais savoir comment faire pour générer des sommaire ( une page avec des liens vers tous les fichiers présents dans un répertoire et ve Dégradé de couleurs d'un texte pour outl.expr. [ par mamierok ] J'avais trouvé un petit logiciel qui me donnait le code en couleurs que je pouvais choisir d'un texte rédiger dans ce logiciel et que je pouvais insér faire un fond en dégradé [ par boss2000 ] bonsoir je voulais savoir comment on fait pour r&#233;aliser une pages web avec un arri&#232;re plan en d&#233;grad&#233; (ex: comme sur google au l [DEPLACE]Ecrire un mot en deux couleurs dégradé!!! [ par biddal ] Je souhaiterai écrire un mot avec un dégradé de deux couleurs mais sur chaque lettre.Pouvez vous me dire s'il y a un moyen en php de le faire? dégradé d'opacité sur du texte [ par Flachy Joe ] Bonjour, ô porteur de connaissance !Voila donc ma question :Est il possible d' (et de quelle manière peut on) appliquer un dégradé sur du texte de faç Générateur dynamique de formulaire Ajax [ par plefebv ] Bonjour ,C'est peut-être une FAQ tant le sujet me semble évident, mais j'ai dû passer à côté. Dans ce cas, merci de me faire savoir où trouver la doc dégradé [ par Lo2887 ] bonjour,je voudrais faire en javascript un dégradé (pas dans un tableau) qui aille du bleu clair au noir, et écrire à chaque ligne (dans une couleur q scrollbar dégradé [ par webide ] Bonjour,Je cherche à créer une scrollbar en dégradé car le fond de la page est également en dégradé mais également dans la foulée supprimer le scroll Dégradé dans défilement photos [ par Miaoulchat ] Bonjour tout le monde, Je me demandais s'il était possible de mettre un dégradé doux entre deux photos lorsqu'elles défilent. Si oui, dans quel langag


Nos sponsors


Sondage...

Comparez les prix


Archos 5 (250 Go)
Entre 440€ et 440€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,811 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)