CSSなblendingを試してみる等
こないだ見つけてこれは素晴らしいと一人大盛り上がりしていたCSS3のblend-modeについて。 このところnode-webkitでいろいろ映像絡みのオモチャを作っているので、主にその辺を前提にこいつを触ってみました。
なんなんそれ
どんなもんなのかはこちらのサイトさんで割とわかりやすく解説されてます。
動作環境
別にWebkit限定でないみたいですが、とりあえずChromiumではデフォルトで動作。GoogleChromeは現在のDevChannelでもFlagsで有効化が必要です。
触ってみた感じ
Photoshop野郎としては提案者のAdobeが仕様として合成の計算式出してる事もありPhotoshopのレイヤーモードの感覚で使えるのがなにより好印象です。（乗算・スクリーン以外は割とグラフィックソフト間で結果が異なったりするもんで）
動かしてみた。
Chromeの上でいくつかテストしてみました。 上の動画はそのときのテストの要素をキャプチャしたもんです。
img要素にただanimationを乗せた状態
単なる重ね合わせなので、透過もなにもないです。レンダリングもちゃんと補完がかかります。まあこの地点では特に今回のblendingはまったく関係ありません。mix-blend-mode: screen; を有効にする。
それぞれのリングが重なり合い、3つとも重なったところが白になっています。レイヤーモードが正しくスクリーンとして扱われている証拠です。しかしながら、transformによる変形の補間がかからなくなりました。さらに親要素にfilter:blur(6px)を与える
親要素にfilter:blurを掛けてもちゃんとブラーがかかります。何故親要素に掛けたのかというと...実はimgそのものにデバッガーからフィルタを掛けるとおもっくそ崩壊したからです。（ちなみにあらかじめCSSで与えてるとちゃんと出るにはでますが、animateを与えると壊れます）ちなみにこんな具合に壊れます。
一旦blurを抜き、下にvideoタグを引く
ではvideoタグの上ではどうか？問題なかったです。この地点までは。 ただ、この状態、レイヤーの合成モードが伝搬せず、この画像を囲ってる親要素で止まってるんですわ。 この辺の挙動はまだよく分からない。この要素にblendオプションを掛ければ望み通りなんですが...さらに親要素にmix-blend-mode: screen; を掛ける
はい、豪快に壊れましたね。animateに引っ張られていく感じです。 ただ動かさない限りは問題無く動きそうな感じではありますな。
まあ軽く触っただけなのでまだなんも言えませんが、現状の実装でもそれなりに面白い使い方はできそうです。
