CSS のfilterについて紹介と試してみたことメモ

CSS filterについて

「filter」プロパティは要素に対してフィルタ効果を与えるというものです。

http://caniuse.com/#search=filter
IE未対応。
ベンダープレフィックス- webkit -を使えば残りの主要ブラウザはほぼ対応。
(2016/6/10調べ)

作ってて思ったのが影の表現でよく使うdox-shadowプロパティfilterのdrop-shadowと
の違いが面白かったです。

透過PNG画像をで試すと分かりやすいんですが、
box-shadow　　→　画像の大きさに合わせてbox状に影
drop-shadow　 →　はちゃんと透過した部分は無視して色があるPixel部分に影
てな感じです。

アルバムめくりをイメージ。
古い記憶がよみがえるようなシーンをイメージして作りました。

主役と脇役を変化させるテスト。
背景をぼかすことで最初の主役を文字に、背景を段々とはっきりさせることで背景に
眠たい時の視界、最後にあくびなど、人間の状態による視覚を再現できるかなと思い作成しました。

CSSアニメーションやjavascriptと組み合わせたりと、
アイデア次第で表現の幅でより広がると思いました。