文字３　■実用■　グラデーション文字ランダム＋CSS

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

CSSのtext-shadowを併用すると、画像のようなタイトル文字が作成できます。
ランダムではない通常指定の『グラデーション文字+CSS』はこちら。こちらのページには、CSSのみの表示見本もあります。

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

text-shadowの指定方法: 横方向縦方向ぼかし影の色;
色の指定で#ff0000と#f00は同じで、『赤色』の指定になります。redでもいいです。
参考 : 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:40px;
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: 40px;
    font-weight: bold;
    text-shadow: 5px 5px 1px #999999;
}

.test3{
    color: #FFF;/*★文字に縁取り*/
    font-size: 40px;
    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: 40px;
    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: 40px;
    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>

<script type="text/javascript">
<!--
/*===================================================================
グラデーション文字 By HIMAJIN  http://himajin.moo.jp 
ランダム部分　By 落書屋雑貨店  http://air.rulez.jp/shop/sozai/index.htm
★ランダム部分追加　2014/09/22
======================================================================*/
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;
}

/*★ランダム指定==========================================================*/
function rndcolor(){
var t="";
for(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の中にもコピーがあります-->

</head>

<body>
<br><br>
<p style="position:absolute;top:200px;right:100px;"><input type="button" value="更新" onClick="location.reload()"></p>

<div align="center">

<!--★ここからコピー　位置は<body>の中です-->

<p class="test1"><span id="grad1">1.動くJavaScript□□■■</span></p>
<p class="test2"><span id="grad2">2.動くJavaScript□□■■</span></p>
<p class="test3"><span id="grad3">3.動くJavaScript□□■■</span></p>
<p class="test4"><span id="grad4">4.動くJavaScript□□■■</span></p>
<p class="test5"><span id="grad5">5.動くJavaScript□□■■</span></p>
<p id="grad6">この画像はページを開くたびに変化します。ブラウザを更新するか、右上の更新ボタンを押してみて下さい。</p>

<script type="text/javascript">
<!--
Gradient("grad1",rndcolor(),rndcolor());/*★1～4まではランダム指定です*/
Gradient("grad2",rndcolor(),rndcolor());
Gradient("grad3",rndcolor(),rndcolor());
Gradient("grad4",rndcolor(),rndcolor());
Gradient("grad5",rndcolor(),"#00ffff"); /*★左はランダム指定で右は通常指定*/
Gradient("grad6","#ff0000","#0000ff");  /*★左も右も通常指定*/
// -->
</script>

<!--★↓この順序で指定。"grad7""grad8"と、行を増やして色を記述し、文章を追加します。
通常指定の方法→　　　Gradient("ID名","左の色(16進数)","右の色(16進数)");
ランダム指定の方法→　Gradient("ID名",rndcolor(),rndcolor());
通常とランダムの方法→Gradient("ID名","左の色(16進数)",rndcolor());
-->

<!--★ここまでコピー。終わり-->

</div>

<br>
<p>■基本のJavaScriptは<a href="hoka_moji1.html">『グラデーション文字』</a>。これに落書屋雑貨店の<a href="http://air.rulez.jp/shop/java/js_rndgradey.htm" target="_new">『ランダムぐらで～しょん』</a>のランダム部分だけをプラスしました。<br>
タイトル文字に使用すると、ページを開くたびに違う色のグラデーションが楽しめます。<br>
あまり背景色と違う色が出ると不安な時は、片側だけ通常指定にすることも可能です。<br>
ランダムなので、たまに同じ色になることもあります。<br>
<br>
CSSのtext-shadowを併用すると、画像のようなタイトル文字が作成できます。<br>
ランダムではない通常指定の『グラデーション文字+CSS』は<a href="hoka_moji2.html">こちら</a>。こちらのページには、CSSのみの表示見本もあります。</p>

<hr><p style="text-align:left;">CSS参考サイト<br>
test1 : <a href="http://liginc.co.jp/web/html-css/css/70065" target="_new">LIGブログ</a><br>
test2 : <a href="http://raining.bear-life.com/css/text-shadow%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%80%81%E6%96%87%E5%AD%97%E3%81%AB%E5%BD%B1%E3%82%84%E7%B8%81%E5%8F%96%E3%82%8A%E3%82%92%E3%81%99%E3%82%8B" target="_new">raining</a><br>

test3 : <a href="http://raining.bear-life.com/css/text-shadow%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%80%81%E6%96%87%E5%AD%97%E3%81%AB%E5%BD%B1%E3%82%84%E7%B8%81%E5%8F%96%E3%82%8A%E3%82%92%E3%81%99%E3%82%8B" target="_new">raining</a><br>

test4 : 上記をアレンジ<br>
test5 : <a href="http://markdotto.com/playground/3d-text/" target="_new">3D Text</a><br>
<br>
text-shadowの指定方法: 横方向 縦方向 ぼかし 影の色;<br>
色の指定で#ff0000と#f00は同じで、『赤色』の指定になります。redでもいいです。<br>

参考 : <a href="../benri/b_1iro.html">16進数4096色カラーチャート</a><br>
</p>

<br><br><br>
</body>
</html>

文字３ ■実用■ グラデーション文字ランダム＋CSS UP日時 : 2014/09/22

　文字３　■実用■　グラデーション文字ランダム＋CSS　　　　UP日時 : 2014/09/22