Edited at

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

More than 3 years have passed since last update.


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と組み合わせたりと、

アイデア次第で表現の幅でより広がると思いました。