フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

CSSで乗算!ブレンドモード「mix-blend-mode」「background-blend-mode」

読了目安時間は約 2 分です。

ブレンドモードは、描画モードとしてPhotoshopやIllustratorなどのAdobe系ツールに搭載されている、グラフィックデザイナーにとってはおなじみの機能です。以前はPhotoshopなどで加工してからWebサイトに使用していましたが、現在はCSSで実装できるようになっています。今回はその方法をまとめましたので紹介します。動画にも使えますよ!

目次

使い方

乗算の場合は

mix-blend-mode: multiply;

スクリーンの場合は

mix-blend-mode: screen;

という具合に記述します。

類似

mix-blend-modeと似たものにbackground-blend-modeがあります。

mix-blend-modeはz-indexで上の要素に、background-blend-modeは背景に作用します。

ブレンドモードの一覧

通常normal
乗算multiply
スクリーンscreen
オーバーレイoverlay
覆い焼きcolor-dodge
焼き込みcolor-burn
比較(暗)darken
比較(明)lighten
ハードライトhard-light
ソフトライトsoft-light
差の絶対値difference
除外exclusion
色相hue
彩度saturation
カラーcolor
輝度luminosity

応用

  • 文字と画像
  • 画像同士(写真とテクスチャ)
  • 画像とグラデーション
  • 動画にも使える

など、PhotoshopやIllustratorなどでできることはだいたい再現できます。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる