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

  • 4
    いいね
  • 0
    コメント

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 ~セピア、グレースケール~

http://codepen.io/yasui05821/pen/Vjeyjv

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

sample-2 ~ぼかしを活用~

http://codepen.io/yasui05821/pen/aZdEVo

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

所感

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