CSS3のブレンドモードを利用して、君もベテランブレンダーになろう。

      2016/07/01

CSS3のブレンドモードを利用して、君もベテランブレンダーになろう。

こんにちは。
30度を超す日もあり初夏の趣きもあるこの頃ですが、
CSS3のブレンドモード(描画モード)にはまっております。

いいですね。ブレンドモード。
繰り返しの透過の背景画像なんかに利用しています。
上のボディビルダーの画像もブレンドモードです。

ブレンドモード(描画モード)は非デザイナーは聞き慣れないかもしれませんが、Photoshopなどでおなじみの機能で、デザイナーなら割と日常的に使っている機能です。

2つ以上の画像またはカラーを重ねあわせて、いろいろな描画表現ができます。今まで効果を加えた画像は、その状態で準備する必要があったんですが、CSS3で描画モードを使えば不要になるということですね。

さっそく、サンプル一覧を作成しましたのでご覧ください。

デモ・サンプル

左が通常の状態、右が各ブレンドモードを適用させた状態です。
それぞれ、同じ画像を重ねたり背景色をつけたりして、効果をわかりやすくしています。

CSSコード

テキストや画像などの要素に直接適用できる「 mix-blend-mode 」と、
背景に適用できる「 background-blend-mode 」とがあります。

opacityとかrgbaで透過させることで微妙なフィルター効果も再現できると思います。うまく使い分ければ、君もベテランブレンダーや!

各ブラウザの対応状況も進んできています。
最近は画像も大きく使うことが増えてきたので、
一手間効果を加えるだけで印象アップできることうけあいです。

是非、参考になさってください。

デモ・サンプル

参考サイト

http://www.webcreatorbox.com/tech/css-blend-mode/
http://blog.cntlog.net/?p=952

以上