|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 GÉNÉRATEUR DE DÉGRADÉS
 Information sur la source
 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
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 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
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|