装飾文字３■グラデーション文字ランダム＋CSS

●2017/06/07：即時関数で囲んで、グローバル変数を消しました。

上記のJavaScriptに、落書屋雑貨店の『ランダムぐらで～しょん』のランダム部分だけをプラスしました。
タイトル文字に使用すると、ページを開くたびに違う色のグラデーションが楽しめます。
あまり背景色と違う色が出ると不安な時は、片側だけ通常指定にすることも可能です。
ランダムなので、たまに同じ色になることもあります。
CSSのtext-shadowを併用すると、画像のようなタイトル文字が作成できます。

ランダムではない、CSSと併用したJavaScriptはこちら　→　装飾文字２■グラデーション文字＋CSS

CSS参考サイト
test1 : LIGブログ
test2 : raining
test3 : raining
test4 : 上記をアレンジ
test5 : 3D Text

参考 : 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>装飾文字３■グラデーション文字ランダム＋CSS</title>

<!--★ここからコピー-->
<style type="text/css"><!--
.test1{
color:#f00;/*★文字に縁取り*/
font-size:30px;
font-weight: bold;
text-shadow: black 1px 1px 0px,
    -1px 1px 0px #000,
    1px -1px 0px #000,
    -1px -1px 0px #000;
}

.test2{
    color: #000;/*★文字に影*/
    font-size: 30px;
    font-weight: bold;
    text-shadow: 4px 4px 1px #999;
}

.test3{
    color: #FFF;/*★文字に縁取り*/
    font-size: 30px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #00F,
    -2px 2px 1px #00F,
    2px -2px 1px #00F,
    -2px -2px 1px #00F;
}

.test4{
    color: #FFF;/*★文字に縁取り。上記アレンジ*/
    font-size: 30px;
    font-weight: bold;
    text-shadow: 3px 3px 3px #865b32,/*★茶色*/
    -2px 2px 1px #000,/*★黒*/
    2px -2px 1px #999,/*★濃い灰色*/
    -2px -2px 1px #fff000;/*★黄色*/
}

.test5 {
    color: #fff;/*★3Dテキスト*/
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。表示位置。「id="●"」は必須。id=●と色の指定はJavaScriptの中で指定。何ヶ所もグラデーション文字表示可能-->

<div style="margin-top:20px; text-align:center;"><!--グラデーション文字の中央位置指定開始。不要なら削除-->

<p class="test1" id="grad1">1.動くJavaScript□□■■</p>
<p class="test2" id="grad2">2.動くJavaScript□□■■</p>
<p class="test3" id="grad3">3.動くJavaScript□□■■</p>
<p class="test4" id="grad4">4.動くJavaScript□□■■</p>
<p class="test5" id="grad5">5.動くJavaScript□□■■</p>
<span id="grad6">●6.上記の文字はページを開くたびに色変化します。ブラウザを更新してみて下さい●</span><br>

</div><!--グラデーション文字の中央位置指定終了。不要なら削除-->

<script type="text/javascript"><!--
/*===================================================================
グラデーション文字　http://himajin.moo.jp/freejava/Gradienttext.html(サイト:http://himajin.moo.jp)
ランダム部分　http://air.rulez.jp/shop/java/js_rndgradey.htm(落書屋雑貨店：http://air.rulez.jp/shop/sozai/index.htm)
★2017/06/07　ランダム部分追加即時。関数でグローバル変数を削除
======================================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★idと色の指定。G("id名","左の色(16進数)","右の色(16進数)")。何行でも増減可能。色名は6桁コードで指定
//★色をランダム指定する時は、色名コードではなく rc() と記述

G("grad1",rc(),rc());　/*★見本は1～3まではランダム指定です*/
G("grad2",rc(),rc());
G("grad3",rc(),rc());
G("grad4","#ffdd77",rc());　/*★左は通常指定で右はランダム指定*/
G("grad5",rc(),"#00ffff");　/*★左はランダム指定で右は通常指定*/
G("grad6","#ff0000","#0000ff");  /*★左も右も通常指定*/

//指定ここまで-------------------------------------------------------

function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
function G(gradient_elm,cstart,cend){
var temp=$(gradient_elm).innerHTML;
var n=temp.length;
var gradient_str="";
  var start_r=Number(("0x"+cstart.substring(1, 3)).toString(10));  
  var start_g=Number(("0x"+cstart.substring(3, 5)).toString(10));
  var start_b=Number(("0x"+cstart.substring(5, 7)).toString(10));
  var end_r=Number(("0x"+cend.substring(1, 3)).toString(10));
  var end_g=Number(("0x"+cend.substring(3, 5)).toString(10));
  var end_b=Number(("0x"+cend.substring(5, 7)).toString(10));
  var g_r= Math.floor((start_r-end_r)/n);
  var g_g= Math.floor((start_g-end_g)/n);
  var g_b= Math.floor((start_b-end_b)/n);

for(var i=0;i < n; i++) {
if(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;
var c="#"+temp_r+temp_g+temp_b;
gradient_str+=temp.charAt(i).fontcolor(c);
}
$(gradient_elm).innerHTML=gradient_str;
}
/*★ランダム指定==========================================================*/
function rc(){
var t="";
for(var count=1; count<=16; count++){      /*原本count<=6★青が出ないので修正*/
	var kazu = Math.floor(Math.random()*16);
	if(kazu >= 0 && kazu <= 9)	t=t+kazu;
		else if(kazu == 10)	t=t+"a";
		else if(kazu == 11)	t=t+"b";
		else if(kazu == 12)	t=t+"c";
		else if(kazu == 13)	t=t+"d";
		else if(kazu == 14)	t=t+"e";
		else if(kazu == 15)	t=t+"f";}
	return t;
}
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

装飾文字３■ グラデーション文字ランダム＋CSS 最終修正日 : 2017/06/07

　装飾文字３■　グラデーション文字ランダム＋CSS　　　　最終修正日 : 2017/06/07