しんぺー 
ミックスブレンドモードの指定をXDデザインから、CSSに変換するのに毎回調べてるな。
使いやすい一覧表ほしいな。
しんぺー
XD to CSSの一覧を作成しました。
一応CSS反映時のサンプルも用意しているので、ブレンドの結果がどんな雰囲気になるか確認できると思います。
この記事で解決できるお悩み
この2つの画像をミックスします
ミックスする画像はこちらです。
グラデーションのやつも画像です。疑似要素でCSSで再現するのも良いと思います。
ミックスブレンドモード一覧
XDでの名称とCSSの名称を一覧にしました。
コーディング時はこの一覧だけあれば大丈夫ですね。
ほかにもどんな効果があるのか気になる方は、すべての効果の反映結果を用意しましたのでどうぞ。
| Adobe XD | CSS |
|---|---|
| 比較（暗） | mix-blend-mode: darken; |
| 乗算 | mix-blend-mode: multiply; |
| 焼き込みカラー | mix-blend-mode: color-burn; |
| 比較（明） | mix-blend-mode: lighten; |
| スクリーン | mix-blend-mode: screen; |
| 覆い焼きカラー | mix-blend-mode: color-dodge; |
| オーバーレイ | mix-blend-mode: overlay; |
| ソフトライト | 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; |
比較（暗）
mix-blend-mode: darken;
乗算
mix-blend-mode: multiply;焼き込みカラー
mix-blend-mode: color-burn;比較（明）
mix-blend-mode: lighten;スクリーン
mix-blend-mode: screen;覆い焼きカラー
mix-blend-mode: color-dodge;オーバーレイ
mix-blend-mode: overlay;ソフトライト
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;CodePenで確認したい方はこちらからどうぞ
CodePenでも作成しましたので、こちらの方が見やすい方はどうぞ。
See the Pen mix-blend-mode by shimpei (@shimpei) on CodePen.
