CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 14 04:01:00

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

GÉNÉRATEUR DE DÉGRADÉS

Information sur la source

Note :

10,00 / 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 :14 835

Auteur : macsou01

Ecrire un message privé

Site perso

Commentaire sur cette source (10)

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

MISE EN ÉVIDENCE DES ZONES AREA SUR UNE MAP HTML

FRACTALE DE MANDELBROT

CRÉER UN REFLET D'UNE IMAGE

DESSINER DES CERCLES/DISQUES/LIGNES EN JAVASCRIPT

Toutes les sources de macsou01

Sources de la même categorie

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

DRAG & DROP VERS UN CANVAS par kazma

ROTATION D'UNE IMAGE, ANIMATION par william voirol

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

CARTAGE (30AVRIL2008) - FUSION EDITION par benoitmacier

GENERATEUR DE PSEUDO MSN par BTAJV

CRYPTAGE ET APPLICATION par abdelaziz_info

ANNONCE ET PUBLICITÉ OU AUTRES INFORMATIONS AUTOMATIQUES par abdelaziz_info

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.

@+

Commentaire de Isole le 23/01/2011 19:08:56 10/10

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.

Commentaire de macsou01 le 23/01/2011 19:46:05

Heureux d'avoir pu vous être utile ! ;)

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éaliser une pages web avec un arrière plan en dégradé (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

Derniers Blogs

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System