begin process at 2010 08 01 01:28:43
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > DÉGRADÉ DE TEXTE

DÉGRADÉ DE TEXTE


 Information sur la source

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :Degrade, Color, Hex Niveau :Initié Date de création :07/05/2009 Date de mise à jour :11/05/2009 19:55:51 Vu / téléchargé :2 967 / 134

Auteur : XelectroX

Ecrire un message privé
Site perso
Commentaire sur cette source (16)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Petite fonction pour retourner un texte html en dégradé

Conversion hex inclues

Explication des variables :
R1, G1, B1 : color1 décomposé
R2, G2, B2 : color2 décomposé
FR, FG, FB : facteurs de la différence de couleur par lettre

Exemple d'utilisation : html = degrade('1234567890', '000000', 'FFFFFF');

Source

  • function d2h(d) {
  • var tmp = d.toString(16);
  • if (tmp.length < 2) {tmp = "0" + tmp;}
  • return tmp;
  • }
  • function h2d(h) { return parseInt(h, 16); }
  • function degrade(text, color1, color2) {
  • var len = text.length;
  • var R1, G1, B1;
  • var R2, G2, B2;
  • var FR, FG, FB;
  • var tmp = "";
  • R1 = h2d(color1.substr(0, 2)); G1 = h2d(color1.substr(2, 2)); B1 = h2d(color1.substr(4, 2));
  • R2 = h2d(color2.substr(0, 2)); G2 = h2d(color2.substr(2, 2)); B2 = h2d(color2.substr(4, 2));
  • FR = (Math.abs(R1 - R2) / len); FG = (Math.abs(G1 - G2) / len); FB = (Math.abs(B1 - B2) / len);
  • for (var i = 1; i <= len; i++) {
  • if(i == 1){
  • tmp += '<font color="#' + color1 + '">' + text.substring(i - 1, i) + '</font>';
  • }else{
  • var R, G, B;
  • if (R1 >= R2) { R = Math.abs( R1 - Math.round(FR * i)); } else { R = R1 + Math.round(FR * i); }
  • if (G1 >= G2) { G = Math.abs( G1 - Math.round(FG * i)); } else { G = G1 + Math.round(FG * i); }
  • if (B1 >= B2) { B = Math.abs( B1 - Math.round(FB * i)); } else { B = B1 + Math.round(FB * i); }
  • tmp += '<font color="#' + d2h(R) + d2h(G) + d2h(B) + '">' + text.substring(i - 1, i) + '</font>';
  • }
  • }
  • return tmp;
  • }
function d2h(d) {
    var tmp = d.toString(16);
    if (tmp.length < 2) {tmp = "0" + tmp;}
    return tmp;
}
function h2d(h) { return parseInt(h, 16); }
function degrade(text, color1, color2) {
    var len = text.length;
    var R1, G1, B1;
    var R2, G2, B2;
    var FR, FG, FB;
    var tmp = "";
    R1 = h2d(color1.substr(0, 2)); G1 = h2d(color1.substr(2, 2)); B1 = h2d(color1.substr(4, 2));
    R2 = h2d(color2.substr(0, 2)); G2 = h2d(color2.substr(2, 2)); B2 = h2d(color2.substr(4, 2));
    FR = (Math.abs(R1 - R2) / len); FG = (Math.abs(G1 - G2) / len); FB = (Math.abs(B1 - B2) / len);
    for (var i = 1; i <= len; i++) {
        if(i == 1){
            tmp += '<font color="#' + color1 + '">' + text.substring(i - 1, i) + '</font>';
        }else{
            var R, G, B;
            if (R1 >= R2) { R = Math.abs( R1 - Math.round(FR * i)); } else { R = R1 + Math.round(FR * i); }
            if (G1 >= G2) { G = Math.abs( G1 - Math.round(FG * i)); } else { G = G1 + Math.round(FG * i); }
            if (B1 >= B2) { B = Math.abs( B1 - Math.round(FB * i)); } else { B = B1 + Math.round(FB * i); }
            tmp += '<font color="#' + d2h(R) + d2h(G) + d2h(B) + '">' + text.substring(i - 1, i) + '</font>';
        }
    }
    return tmp;
}

 Conclusion

J'attend vos avis ;)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

09 mai 2009 10:37:20 :
Correction suite au commentaire de JDMCREATOR
11 mai 2009 19:55:55 :
Correction selon Oppiz :D

 Sources de la même categorie

Source avec Zip Source avec une capture VIDEO EN FOND DE PAGE WEB (HTML5) par BarbuJack
Source avec Zip Source avec une capture EFFET DE TEXTE EN CSS3 par kazma
Source avec Zip Source avec une capture TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY par pysco68
Source avec Zip Source avec une capture DE L'OMBRE par kazma
INFO BULLE NON DESTRUCTIVE par McPeter

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture LIBRAIRIE DE GESTION DES COULEURS POUR CSS : COLORPARSER par ryosama
Source avec Zip PLAY COLORS V2.0 par astro53
Source avec une capture SYSTEME DE NOTATION par biskbart
Source avec Zip Source avec une capture OBTENIR LA COULEUR DE FOND VISIBLE D'UN ÉLÉMENT DHTML [GETVI... par MaX3315
Source avec Zip CHANGER LA COULEUR DE LA PAGE par glork

Commentaires et avis

Commentaire de jdmcreator le 08/05/2009 02:18:14

Petit Code pour le tester :

<button onclick="document.getElementById('div').innerHTML=degrade('allo','rgb(255,255,255)','rgb(0,0,0)')"></button><div id=div></div>

Seulement, cela me retourne un texte qui ne part pas du tout du blanc au noir. Je n'ai pas regardé le code. Sinon, c'est du bon travail ;)

JDMCreator

Commentaire de XelectroX le 08/05/2009 20:58:02

Je sais pas pourquoi ca ne va pas du blanc au noir, peut-être à cause des calculs, je pense surtout au arrondissements ...

Commentaire de MaX3315 le 11/05/2009 08:58:36

@JDMCREATOR
Je pense plutôt que cela vient du mauvais format des arguments color1 et color2 ;)

degrade('allo','rgb(255,255,255)','rgb(0,0,0)')
C'est pas
degrade('1234567890', '000000', 'FFFFFF');

Commentaire de meliubaf le 11/05/2009 10:46:19

Un autre petit test :

<button onclick="document.getElementById('div').innerHTML=degrade('Letest avec espaces.', 'FF80FF', '400080')"></button>
<div id=div></div>

ça ne marche pas terrible... 1ere lettre en couleur, puis du noir, et le dernier mot en dégradé. Mais ce ne sont pas les couleurs voulues. Et si on met la vrai couleur en paramètres #FF80FF c'est un autre résultat. Logique d'ailleurs puisque le # est dans le script. Mais ça ne fait pas non plus un vrai dégradé. à corriger sans doute, mais sinon c'était une bonne idée.

Commentaire de oppiz le 11/05/2009 12:42:54

c'est un bon début mais faut quand même utiliser les valeurs de départ pour le dégradé et savoir le sens su dégradé. Ce n'est pas grand chose mais cela permet que cela fonctionne.

en simple et direct il suffit de modifier le calcul des couleurs par :

if (R1 >= R2) { R = Math.abs( R1 - Math.round(FR * i)); } else { R = R1 + Math.round(FR * i); }
if (G1 >= G2) { G = Math.abs( G1 - Math.round(FG * i)); } else { G = G1 + Math.round(FG * i); }
if (B1 >= B2) { B = Math.abs( B1 - Math.round(FB * i)); } else { B = B1 + Math.round(FB * i); }

et c'est tout bon !!!!!!!!

Commentaire de meliubaf le 11/05/2009 14:47:14

EXACT ! bonne correction de la ligne 21 du script ci-dessus.
Merci Oppiz.

Il ne manque plus qu'une capture d'écran dans le descriptif...

Commentaire de XelectroX le 11/05/2009 19:56:25

Voilà, tout le monde peut être satisfait =P

Commentaire de sitajony le 26/08/2009 01:11:05 9/10

C'est pas mal... J'ai remarqué qu'on a la possibilité de faire des dégradé de plusieur couleur sans changer le script... Exemple: html = degrade('1234567890', 'f00', '00f'); donne du noir rouge marron vert... Sa évite de taper plusieur foit les balises font à la main...

Commentaire de arenasaa le 06/11/2009 09:36:47

Bonjour

je suis impressionnnnnne!

comment faire pour changer la couleur en degrade au font de la page html (verticale ou horizontal).
ex: bleu... bleu ciele ?
merci pour votre aide!

Commentaire de XelectroX le 06/11/2009 09:53:51

Je ne connais aucune solution pour changer la couleur de fond par un dégrader, il faut donc sûrement passer par une image de fond...

Commentaire de meliubaf le 06/11/2009 10:16:55

Bonjour,

en effet pour faire un degradé en couleur de fond personnellement je passe par une image très légère : un .png qui fait 1 pixel de large sur 1024 de hauteur, crée avec paint shop pro, tout simple.
code de la page html (ou à mettre dans la feuille de style .css)

<style>
BODY { background : #C0FFC0 url(IMG/gradient.png) repeat-x; }
</style>

Le premier code couleur est pour indiquer la couleur à mettre si l'image n'est pas chargé et afin de definir la couleur lorsque l'image est "finie" exemple sur une page très longue.
Possibilité de mettre le mot "fixed" devant "repeat-x", ça change le défilement. Faites des essais pour voir...

Commentaire de arenasaa le 06/11/2009 11:04:40

bonjour,

merci pour votre aide :)

sa fonction tres bien !
arenas

Commentaire de arenasaa le 06/11/2009 11:48:39

ai,

se ne pas toute a fait sa......

[url=http://pagesperso-orange.fr/arenas/image/testgris.html]gris degrade[/url]

Commentaire de meliubaf le 06/11/2009 17:43:46

ça dépend de la hauteur de votre image, du parametre fixed mis ou non, du paramètres repeat à ne pas mettre dans votre exemple je pense etc...

Commentaire de arenasaa le 06/11/2009 20:17:03

bonsoir,

j'ai trouver la soluc.....

http://www.meric-graphisme.info/articles.php?lng=fr&pg=1943

merci pour votre aide
arenas

Commentaire de arenasaa le 06/11/2009 20:47:32

Voici le resultat :)

http://pagesperso-orange.fr/arenas/image/testnoel.html

bye

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

De l'aide pour un petit jeu.... [ par Nini ] Voilà le script d'une page : &lt;html&gt;&lt;head&gt;&lt;title&gt;..:: Challenge JavaScript Niveau: 5 :: Extra-Facile ::..&lt;/title&gt; &lt;script l probleme avec couleur scrool I.E [ par Meduse ] Votre texte ICIVotre texte ICIje place ce bout de code entre les balises &lt;HEAD&gt; et &lt;/HEAD&gt; dans ma page hTML pour pouvoir collorer la scro Tri inversé ?? [ par cctiger ] Salut à tous !!!!J'utilise ce petit script très sympa qui permet de trier un tableau sans recharger la page. Le problème c'est qu'il permet de le trie coulur du boutton [ par rich25200 ] Bonjour,j'ai un prob.. j'ai un input type="button" style="backgrond-color:#000000&gt; et j'aimerai qu'il change de couleur.... mais la tout va bien en format HEX puis bmp [ par MisterJAD ] bonjour,je suis pour ainsi dire nul en js (g jms trop cherché à apprendre ce language) mais j'aurais absolument besoin d'une fonction qui convertit de question de menu [ par valouh ] Bonjour les gens,je suis débutante et j'ai un ptit problème, je voudrais savoir si on peut faire ça:j'ai 2 menus différents et je voudrais faire un mi changement de couleur d'un lien [ par vince062 ] bonjour,je voudrais créer une méthode js permettant de modifier la couleur d'un lien mais j'y arrive po... É oué je suis encore novice!!En gros voila UPDATE BASE AVEC CHAMPS PAR RAPPORT A JAVASCRIPT [ par rafou77 ] Bonjour, voilà j'ai une page qui s'appel taux2.php ou là il ya des champs avec des taux dans une base que je peux mettre à jour sans prob... juste en Setpixel (x,y) = color , color = getpixel (x,y) [ par frop01 ] Salut,Je voudrais savoir, s'il existe une fonction de lecture et écriture d'un pixel en javascript ??if réponse==oui { alert ("expliquer");}Merci . Changer l'attribut color [ par perig ] Bonjoursvoila, j'aimerais pouvoir changer la couleurs d'un texte aprés avoir cliqué dessu.J'ai essayé de faire :&lt;a href="javascript:color("font")"&


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Août 2010
LMMJVSD
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

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,718 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales