CSS3 background-blend-modeを試してみた
background-blend-modeプロパティ
background-blend-modeについて(仕様書)
Compositing and Blending Level 1
ブレンドというと、グラフィック系ソフトを使っている方には馴染みのある機能だと思いますが、CSSだけで画像にブレンドの効果をつけることが出来るbackground-blend-modeプロパティはとても手軽ですし、いちいちソフトを立ち上げて画像を修整して・・・っていう手間がないので、画像の修整やお手入れが発生した際も少し楽になるかもです。
webページでCSSを使って画像にブレンド効果をつけることが出来るということは、動的な何かにも対応するのも楽ちんですね。単純なので言うと、hover時に画像にブレンド効果を加える、とか。「その時用に」加工画像をすべて用意しなくてはいけないという手間が省けます。
が、やはり気になるのがブラウザの対応状況です。Can I useで確認したところ、Firefox、Chrom、Safari、Operaの最新バージョンなら大丈夫。Safariも次のバージョンが大丈夫みたい。IE様は…知らん。
background-blend-modeプロパティの値
使える指定可能なプロパティは、normal(初期値・効果なし)を入れて全部で16個です。
- normal
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
一覧のサンプルページを置いておきます。今回は元画像に「#75C4D1(水色)」を混ぜました。
対応ブラウザじゃないと見れないのでこちらにキャプチャも置いておきますね。
background-blend-modeプロパティ 使ってみるの巻
上でチラっと書いたhover時にブレンド効果を切り替えるようなサンプルを試してみたので置いておきます。
もうちょっと使えそうなやつで…例えばサブコンテンツのとこにバナー画像を背景画像として並べておいて、hoverで背景画像を切り替える、みたいなパターンの時。ほらほら、なんかそういうのよくありましたやん。hoverで半透明にする、とかその逆とか。ああいうの。最初は背景画像をmultiplyにしておいて、hoverでhard-light、という使い方をしてみる。グローバルナビとか背景画像でやる時もこういう感じで使えそう。
あくまで背景に適応されるプロパティなので、img要素に直接効果を付与したいんやって場合はまた話が変わってきますが、背景画像ってのはよく使うと思いますので色々使いどころはあるかな、と。ただブラウザの対応(ｒｙ
img要素と背景をブレンドしたい場合はmix-blend-modeプロパティを使えば良いのだろうけれども、こっちはますますブラウザが対応してないので厳しいかなと思います。（2014年7月7日現在）
ブレンドモードにグラデーションを追加する
background-blend-modeとlinear-gradientを組み合わせて背景画像にブレンド効果を加えてさらにグラデーションまでつけちゃうぜっていう使い方もできます。
最近linear-gradient大好きっ子なので、ついでに試してみる。
仕様書に書いてある通りで、なんのひねりもないですが、元画像に、分かりやすいように黒から白へのグラデーションを加えてみました。（ちょっと色のチョイスがまずくてあんまりいい感じじゃないやつが多いですが…）
>>background-blend-modeとlinear-gradient サンプル
上のサンプルはザックリやりすぎて可愛くなかったからlinear-gradientを半透明にしとく(；´Д｀)
>>background-blend-modeとlinear-gradient サンプル
