CSS gradation - グラデーション
資料
基本的なグラデーション
- linear-gradient : 線状のグラデーション。
MDN: linear-gradient() - radial-gradient : 円状のグラデーション。
MDN: radial-gradient() - conic-gradient() : 扇型のグラデーション。
繰り返しのパターンのグラデーション
- repeating-linear-gradient : 繰り返しの線上のグラデーション。
MDN: repeating-linear-gradient - repeating-radial-gradient() : 繰り返しの円状。
- repeating-conic-gradient() : 繰り返しの扇型。
サンプル (2023/01)
- TestCSS_gradation_repeating-linear-gradient01.html
repeating-linear-gradient のサンプル。角度とパターンの方向。
CSS repeating-linear-gradient
線上の繰り返しのパターン
CSS gradation と repeating-linear-gradient でグリッド線を表示する。
CSS background
TestCSS_gradation_torcs_texture01.html
自動車レースゲーム TORCS のテクスチャを CSS グラデーションで作ってみる。
CSS background-blend-mode は下を参照。
TestCSS_layer_blendmode_torcs01.html
CSS フィルター filter
自動車レースゲーム TORCS のテクスチャを CSS グラデーションで作ってみる。
CSS background-blend-mode は下を参照。
TestCSS_layer_blendmode_torcs01.html
CSS フィルター filter
- TestJS_edit_html01.html
HTML 編集シミュレーション。 2枚のグラデーション CSS を background-blend-mode で重ねるサンプル。