グラデーション

このページはASP.NET Core 3.0 Blazor Server Sideを使用して作成されています。
コードは全てJavascriptではなく、C#で記述します。(C#からJavascript呼出しも可)
イベント発生時はビルトインのJavascriptがSingalRを用いてサーバーに通知,
サーバーでの処理後、SignalRを用いてブラウザに結果が通知されます。
ブラウザ側のJavascript(blazorのビルトイン)が結果を元にDOMの変更部分のみを再描画します。
例えば、上の<h1>タグはソース上では以下のように定義されており、実際にはその下のように変換されます。
(@titleStyleはtitleStyleというC#の変数値に置き換えられる)

	<h1 style="@titleStyle">グラデーション</h1>
	⇓
	<h1 style="font-weight:bold;
        background: linear-gradient(#808080,#ffffff);
        -webkit-text-fill-color: transparent;-webkit-background-clip: text;",">グラデーション</h1>

ソース

Linear Gradient
角度： 180°

Radial Gradient 開始位置(X)： 40px
開始位置(Y)： 30px
開始色開始位置: 10px
終了色開始位置: 70px   リセット
Change Color ⇐ランダムに色と角度を生成します