ミックスブレンドモード (mix-blend-mode) を使った表現 – browser-land

ミックスブレンドモード (mix-blend-mode) を使った表現

 ミックスブレンドモード (mix-blend-mode) を使った表現

mix-blend-modeは、上と下に重なる2つの要素を混合します。
JavaScriptの場合は「element.style.mixBlendMode = ‘normal’」とします。

mix-blend-mode:normal; ブレンドしない

mix-blend-mode:multiply; 絵具を混ぜたような暗い表現 (乗算)

mix-blend-mode:screen; 光を掛け合わせたような明るい表現 (スクリーン)

mix-blend-mode:overlay; 乗算とスクリーン両方に近い効果 (オーバーレイ)

mix-blend-mode:darken; 上下の画像を比較して暗いピクセルが表示 (比較:暗)

mix-blend-mode:lighten; 上下の画像を比較して明るいピクセルが表示 (比較:明)

mix-blend-mode:color-dodge; スクリーンよりもより明るい (覆い焼き)

mix-blend-mode:color-burn; 乗算よりもより暗い表現 (焼きこみ)

mix-blend-mode:soft-light; より明るく、より暗くする表現 (ソフトライト)

mix-blend-mode:hard-light; ソフトライトよりも強い表現 (ハードライト)

mix-blend-mode:difference; 部分的に反転したような表現 (差の絶対値)

mix-blend-mode:exclusion; 差の絶対値よりコントラストが弱い (除外)

mix-blend-mode:hue; 下の輝度・彩度、上の色相を持つ (色相)

mix-blend-mode:saturation; 下の輝度・色相、上の彩度を持つ (彩度)

mix-blend-mode:color; 下の輝度、上の彩度・色相を持つ (カラー)

mix-blend-mode:luminosity; 下の彩度・色相、上の輝度を持つ (輝度)

Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード