色の操作：
指定した文字列の色をグラデーションにする
指定したNodeの背景にグラデーションを生成し、文字列の形で切り抜く(clipする)ことで文字列のグラデーションカラー表現を行う。
Node
Nodeを指定 id値を文字列で指定してもよい
Number
グラデーションの終了方向の角度を数値で指定 0–360 ／ (例) 0＝下から上 ・ 90＝左から右 ・ 225＝右上から左下
String1
グラデーションの開始色をHEX値で渡す #FFFFFF ・ #FFF ・ FFFFFF ・ FFF
String2
グラデーションの終了色をHEX値で渡す #FFFFFF ・ #FFF ・ FFFFFF ・ FFF
●必須引数 ●オプション引数(省略可能)
記述例
$clrGradientText(aNode, 0, '#FF0000', '#FF8800')
$clrGradientText('tarId', 225, 'c6dbde', '8eb8bd')
動作サンプル
文字列内の指定した箇所の文字色をグラデーションにする。
あいうえお対象の文字列ABCDE
HTML :
<button type="button" onclick="$clrGradientText('target1',90,'#ff0000','#0000ff')">#ff0000 → #0000ff<br>右向きに</button>
<button type="button" onclick="$clrGradientText('target1',200,'#ff0000','#0000ff')">#ff0000 → #0000ff<br>左下向きに</button>
<button type="button" onclick="$clrGradientText('target1',0,'#4a787d','#c6dbde')">4a787d → c6dbde<br>上向きに</button>
<div>あいうえお<span id="target1">対象の文字列</span>ABCDE</div>
文字列全体をグラデーションにする。
私は一生いくらこの学習院って事のところをやむをえでしょで。できるだけ今が活動方はともかくその挨拶うたかもにしさっそく矛盾で起らん例そうした道これかお焦燥なただろなから、その十月は私か態度他にさて、責任の彼らにまあご見当として私口上にお相違へ見つかりようにもし忠告を進んたからいならものが通った。
HTML :
<button type="button" onclick="$clrGradientText('target2',90,'#ff0000','#0000ff')">#ff0000 → #0000ff<br>右向きに</button>
<button type="button" onclick="$clrGradientText('target2',200,'#ff0000','#0000ff')">#ff0000 → #0000ff<br>左下向きに</button>
<button type="button" onclick="$clrGradientText('target2',0,'#4a787d','#c6dbde')">4a787d → c6dbde<br>上向きに</button>
<p id="target2">私は一生いくらこの学習院って‥‥進んたからいならものが通った。</p>
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。