文字１ ■実用■　グラデーション文字

簡単に文字にグラデーションを掛けます
1つのScriptでいくつでもグラデーション文字を作れます。
himajinサイトのスクリプトです。

CSSと併用した『グラデーション文字+CSS』はこちら。
それにさらにランダム表示を加えた『グラデーション文字ランダム+CSS』はこちら。
参考 : 16進数4096色カラーチャート

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>文字１ ■実用■　グラデーション文字</title>

<!--★ここからコピー-->
<script type="text/javascript">
<!--
/*===================================================================
グラデーション文字　By http://himajin.moo.jp 
======================================================================*/
function Gradient(gradient_elm,cstart,cend){
gradient_temp=document.getElementById(gradient_elm).innerHTML;
gradient_n=gradient_temp.length;
gradient_str="";
  start_r=Number(("0x"+cstart.substring(1, 3)).toString(10));  
  start_g=Number(("0x"+cstart.substring(3, 5)).toString(10));
  start_b=Number(("0x"+cstart.substring(5, 7)).toString(10));
  end_r=Number(("0x"+cend.substring(1, 3)).toString(10));
  end_g=Number(("0x"+cend.substring(3, 5)).toString(10));
  end_b=Number(("0x"+cend.substring(5, 7)).toString(10));
  g_r= Math.floor((start_r-end_r)/gradient_n);
  g_g= Math.floor((start_g-end_g)/gradient_n);
  g_b= Math.floor((start_b-end_b)/gradient_n);

for(i=0;i < gradient_n; i++) {
if(gradient_temp.charAt(i)=="<")return;

if(start_r-g_r*i<0)temp_r=0;
else if(start_r-g_r*i>255)temp_r=255;
else temp_r=start_r-g_r*i;
temp_r=temp_r.toString(16);
if(temp_r.length==1)temp_r="0"+temp_r;

if(start_g-g_g*i<0)temp_g=0;
else if(start_g-g_g*i>255)temp_g=255;
else temp_g=start_g-g_g*i;
temp_g=temp_g.toString(16);
if(temp_g.length==1)temp_g="0"+temp_g;

if(start_b-g_b*i<0)temp_b=0;
else if(start_b-g_b*i>255)temp_b=255;
else temp_b=start_b-g_b*i;
temp_b=temp_b.toString(16);
if(temp_b.length==1)temp_b="0"+temp_b;

gradient_str+=gradient_temp.charAt(i).fontcolor("#"+temp_r+temp_g+temp_b);
}
document.getElementById(gradient_elm).innerHTML=gradient_str;
}
// -->
</script>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>

<body bgcolor="#ffffff">
<br><br>

<!--★ここからコピー　位置は<body>の中です-->
<div align="center">

<span id="grad1">簡単に文字にグラデーションを掛けます</span><br>
<span id="grad2">1つのScriptでいくつでもグラデーション文字を作れます。</span><br>
<span id="grad3">himajinサイトのスクリプトです。</span><br>

<script type="text/javascript">
<!--
Gradient("grad1","#ff0000","#ffff00");
Gradient("grad2","#00ff00","#cc00ff");
Gradient("grad3","#00ffff","#ff00ff");
// -->
</script>

<!--★↓この順序で指定。"grad4""grad5"と、行を増やして色を記述し、文章を追加します。
Gradient("ID名","左の色(16進数)","右の色(16進数)");
 -->

</div>
<!--★ここまでコピー-->

<br><br>
<p class="center">参考 : <a href="http://atsites.jp/oekakirenn/hoka/hoka_1iro.html">16進数4096色カラーチャート</a></p>


</body>
</html>

文字１ ■実用■ グラデーション文字

　文字１ ■実用■　グラデーション文字　　　　