WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

かじかじ

2023/02/06

CSSのブレンドモード「mix-blend-mode」をご紹介!

投稿者: かじかじ
カテゴリー: マークアップ >CSS

PhotoshopやIllustrator等の画像編集ソフトで使用できる、ブレンドモード(描画モード)。
「mix-blend-mode」プロパティを使えば、CSSでも設定ができます。
今回はそんな便利な「mix-blend-mode」プロパティをご紹介します。

ブレンドモード(描画モード)とは?

ブレンドモードとは、レイヤーを重ねたときにどのように重ねて表現するかの設定のことです。

Photoshopだと上記のようにブレンドモードの設定を変更できます。

mix-blend-modeプロパティの種類

mix-blend-modeプロパティには、下記の16種類があります。

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

デフォルトの値はnormalです。

normal(通常)

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

multiply(乗算)

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

screen(スクリーン)

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

overlay(オーバーレイ)

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

soft-light(ソフトライト)

.soft-light{
mix-blend-mode: soft-light;
}

まとめ

今回のように画像にベタ塗りの要素を重ねる以外にも、
画像同士を重ねるときにも使えて便利なので、ぜひ使ってみてください!

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ