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

CSS filterについて

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

対応ブラウザ

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

使える効果

サンプル↓
http://codepen.io/yasui05821/pen/gMpZQd

• ぼかし
• グレースケール
• セピア
• 彩度
• 色相の回転
• 階調反転（ネガ・ポジ）
• 明るさ
• コントラスト
• 影
• 透過度

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

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

実際にアレンジして試してみた

sample-1 ~セピア、グレースケール~

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

sample-2　~ぼかしを活用~

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

所感

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