CSS3からblend-modeというプロパティが使えるようになりました。
Photoshopでいう描画モードがCSSで使えるわけですね。
他社さんからデザインをもらった時、PSDのレイヤーが乗算で乗っていることがありますが、実際に再現してみようとCSSを書いてみると自分の思ってた挙動と異なっていたのでまとめておきます。
Photoshopでの描画モードの変更
まずPhotoshopで描画モードを変更する方法です。
Photoshopのレイヤーパネルのこの部分です。
ここを「通常」の状態から変更することで、レイヤーの重なり方の表現を変えることができます。デザインを見て「あれ、ここ普通の透過じゃない？」と感じたときはここをチェックしてみると良いです。
background-blend-modeとmix-blend-mode
もらったPSDで乗算の描画モードが使われていたのでさっそくblend-modeを以下の記述で試してみると、動きません…。
background-blend-mode: multiply;
background-blend-modeは一つの要素内のbackgroundに複数の色や画像を指定する場合に使うようです。webcreatorboxさんがわかりやすく解説してくれています。
画像にフィルターを掛けたような見栄えになるのでアート要素の高いサイトに使えそうですね。
レイヤーを重ねるように使う場合はこちら。
mix-blend-mode: multiply;
以下でサンプルを用意してみました。
mix-blend-modeのサンプル
mix-blend-modeを「乗算」で試してみました。
通常の状態
blend-modeを使用していない普通の状態です。テキストの色は描画モードの結果を分かりやすくするために白にしています。同じ理由で背景に斜め線のパターンを敷いています。
基本HTML
基本CSS
オレンジ背景をrgbaで透過
blend-modeを使用せず、透過を施しました。背景を透かして見せたい時によく使うCSSです。
オレンジ背景をmix-blend-modeで乗算(multiply)を指定
mix-blend-modeでオレンジ背景が乗算された状態。透過とは違う色の乗り方をするのが魅力的です。 オレンジ背景はうまく乗算されますが、白いテキストが透明になってしまいました。 Photoshopの場合、テキストの描画モードが通常であれば、テキストは白くなるのが普通です。
テキストをdivで囲い、そこにmix-blend-mode: normal;を指定
mix-blend-modeを初期値であるnormalで指定し直すとリセットできるのか試してみましたが、テキストは透明のままでした。
HTML
CSS
テキストをdivで囲い、そこにmix-blend-mode: multiply;を指定
テキストに乗算（multiply）を指定するとテキストが消えてしまいます。
Photoshopで同じことをやるとしっかり同じ結果になりました。
Photoshop上で実際にどう見えるか
Photoshopでのレイヤー構造と描画モードを３パターン、図にしてみました。カッコ内が描画モードの状態です。
自分が初めに想像していたblend-modeは「1」のような動作でしたが、実際には「3」のような状態になります。これで謎が解けました。ちなみにテキストの色が黒であれば１～３どのパターンで表示されます。このあたりは描画モードの仕組みを理解する必要があります。
まとめ
mix-blend-modeはPSDでいう個々のレイヤーに対してではなく、フォルダに対して描画モードを適応した状態になる。
ということでPhotoshopと同じような使い方ができるものの、少し限定的です。よく考えてみるとdivというフォルダーにblend-modeを指定してるのでその通りの動作なんですね。なかなか使いどころが難しいです。
コーダーはCSSで表現できるラインを把握しておけば後から「再現できない！」と、デザイン変更などでもめることがなくなると思います。デザイナーはwebデザインをする時に描画モードを変更するときは気をつけてみて下さい。隣接する職種の知識に興味を持ったりコミュニケーションをとることが大切ですね。
CSS3 スタンダード・デザインガイド【改訂第２版】 ［リフロー版］
- 作者: エ・ビスコム・テック・ラボ
- 出版社/メーカー: マイナビ出版
- 発売日: 2013/05/22
- メディア: Kindle版
- この商品を含むブログを見る
