emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

CSS blend-modeとPhotoshopの描画モード

CSS3からblend-modeというプロパティが使えるようになりました。

Photoshopでいう描画モードがCSSで使えるわけですね。

 

他社さんからデザインをもらった時、PSDのレイヤーが乗算で乗っていることがありますが、実際に再現してみようとCSSを書いてみると自分の思ってた挙動と異なっていたのでまとめておきます。

 

 

Photoshopでの描画モードの変更

まずPhotoshopで描画モードを変更する方法です。

f:id:emj1025:20161031112319g:plain

Photoshopのレイヤーパネルのこの部分です。
ここを「通常」の状態から変更することで、レイヤーの重なり方の表現を変えることができます。デザインを見て「あれ、ここ普通の透過じゃない?」と感じたときはここをチェックしてみると良いです。

 

 

background-blend-modeとmix-blend-mode

もらったPSDで乗算の描画モードが使われていたのでさっそくblend-modeを以下の記述で試してみると、動きません…。

 

background-blend-mode: multiply;

 

 background-blend-modeは一つの要素内のbackgroundに複数の色や画像を指定する場合に使うようです。webcreatorboxさんがわかりやすく解説してくれています。

 

www.webcreatorbox.com

 

画像にフィルターを掛けたような見栄えになるのでアート要素の高いサイトに使えそうですね。

 

 

レイヤーを重ねるように使う場合はこちら。

 

mix-blend-mode: multiply;

 

以下でサンプルを用意してみました。

 

 

mix-blend-modeのサンプル

mix-blend-modeを「乗算」で試してみました。

 

通常の状態

テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト

blend-modeを使用していない普通の状態です。テキストの色は描画モードの結果を分かりやすくするために白にしています。同じ理由で背景に斜め線のパターンを敷いています。

 

基本HTML

 

基本CSS

 

 

オレンジ背景をrgbaで透過

class="blend-in is-02"テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキスト

blend-modeを使用せず、透過を施しました。背景を透かして見せたい時によく使うCSSです。

 

 

オレンジ背景をmix-blend-modeで乗算(multiply)を指定

class="blend-in is-03"テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキスト

mix-blend-modeでオレンジ背景が乗算された状態。透過とは違う色の乗り方をするのが魅力的です。 オレンジ背景はうまく乗算されますが、白いテキストが透明になってしまいました。 Photoshopの場合、テキストの描画モードが通常であれば、テキストは白くなるのが普通です。

 

 

テキストをdivで囲い、そこにmix-blend-mode: normal;を指定

class="blend-in is-03"
テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキスト

mix-blend-modeを初期値であるnormalで指定し直すとリセットできるのか試してみましたが、テキストは透明のままでした。

HTML

CSS

 

テキストをdivで囲い、そこにmix-blend-mode: multiply;を指定

class="blend-in is-03"
class="blend-in-txt is-multiply"テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキスト

テキストに乗算(multiply)を指定するとテキストが消えてしまいます。
Photoshopで同じことをやるとしっかり同じ結果になりました。

 

 

 

Photoshop上で実際にどう見えるか

Photoshopでのレイヤー構造と描画モードを3パターン、図にしてみました。カッコ内が描画モードの状態です。

f:id:emj1025:20161031161836p:plain

自分が初めに想像していたblend-modeは「1」のような動作でしたが、実際には「3」のような状態になります。これで謎が解けました。ちなみにテキストの色が黒であれば1~3どのパターンで表示されます。このあたりは描画モードの仕組みを理解する必要があります。

 

 

まとめ

mix-blend-modeはPSDでいう個々のレイヤーに対してではなく、フォルダに対して描画モードを適応した状態になる


ということでPhotoshopと同じような使い方ができるものの、少し限定的です。よく考えてみるとdivというフォルダーにblend-modeを指定してるのでその通りの動作なんですね。なかなか使いどころが難しいです。

 

コーダーはCSSで表現できるラインを把握しておけば後から「再現できない!」と、デザイン変更などでもめることがなくなると思います。デザイナーはwebデザインをする時に描画モードを変更するときは気をつけてみて下さい。隣接する職種の知識に興味を持ったりコミュニケーションをとることが大切ですね。 

 

 

CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]

CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]

 

 

emuramemo(c) All Rights Reserved.