株式会社アド・エータイプ

仙台のホームページ制作はアド・エータイプ

STAFF BLOGスタッフブログ

cssのブレンドモード「mix-blend-mode」プロパティを使ってみよう

2022/05/30 HTML/CSS

デザインデータをもとにコーディングをいざはじめよう!と思った矢先、 データの一部にブレンドモード(描画モード)がかかっていた…なんてことはありませんか?

Photoshopやillustratorでレイヤーを重ねて合成することはデザイナーさんにとって よくあることだと思います。そして、こちらの総称をブレンドモード(描画モード)と呼びます。

しかしこちら、cssで表現するとなると少し厄介です。
opacityをつけて表現してみたり、カラーコードで色を抽出しても同じ色は表現できないため、 困った時がありました。 画像にしてしまえば話は早いのですが、どうしてもコードで表現したい場合なんてのは少なくないはずです。

そんな時に、調べてみたらありました。cssでのブレンドモードなるものが!
今回ご紹介するcssの「mix-blend-mode」プロパティを使用すれば、ブレンドモードの効果を簡単にcssで表現することができます。

「mix-blend-mode」プロパティについて

指定方法は16通りあります。

  1. 通常 — normal
  2. 乗算 — multiply
  3. スクリーン — screen
  4. オーバーレイ — overlay
  5. 覆い焼き — color-dodge
  6. 焼き込み — color-burn
  7. 比較(暗) — darken
  8. 比較(明) — lighten
  9. ハードライト — hard-light
  10. ソフトライト — soft-light
  11. 差の絶対値 — difference
  12. 除外 — exclusion
  13. 色相 — hue
  14. 彩度 — saturation
  15. カラ — color
  16. 輝度 — luminosity

今回は比較を行うため通常、乗算、スクリーン、オーバーレイ、差の絶対値の5つを使用してみたいと思います。

使い方

ポイントは「mix-blend-mode」プロパティで囲った内容にはすべて効果が掛かってしまうため、上に文字や画像を載せたい場合は別の要素に分けて記述します。

See the Pen Untitled by adatype (@adatype) on CodePen.

通常


.normal {
	mix-blend-mode: normal;
}

乗算


.multiply {
	mix-blend-mode: multiply;
}

スクリーン


.screen {
	mix-blend-mode: screen;
}

オーバーレイ


.overlay {
	mix-blend-mode: overlay;
}

差の絶対値


.difference {
	mix-blend-mode: difference;
}

やはり乗算の使い勝手が良すぎます。。
画像同士を重ねて指定したりすることもできるため、 背景と画像を上手くなじませることもできました。

まとめ

IE11などプロパティが反映されないブラウザもありますが、そこは画像に切り替えるなどして 臨機応変に対応していきましょうね。

【参考サイト】
https://www.asobou.co.jp/blog/web/css-mix-blend
https://logical-studio.com/develop/web/20200512-mix-blend-mode/

この記事を書いた人

SNSのシェアはこちらから

アド・エータイプに、
相談してみませんか?

無料お見積り・お問い合わせなど、
お気軽にご相談ください。

ページ上部へ