このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2012.06.01

css3 Fillter Effects -webkit-filterを試してみました。

css3ではFillter Effectsも実装予定となっております。

開発用webブラウザ、webkitにて以下の画像を使い検証を行いました。

webkit

http://nightly.webkit.org/

以下の画像を元にcssで変化させます。

-webkit-filter: blur(3px);

-webkit-filter:brightness(30%);

-webkit-filter:contrast(30%); 

-webkit-filter:grayscale(); 

-webkit-filter:sepia(); 

-webkit-filter: invert(); 

-webkit-filter: opacity(30%); 

-webkit-filter: saturate(50%); 

-webkit-filter:hue-rotate(90deg); 

-webkit-filter:hue-rotate(300deg); 

-webkit-filter:drop-shadow(rgba(0,0,0,0.5) 0 5px 5px);

こりゃ便利ですねー。

 

Safari5.1.7では未だ実装されていないようです。

またChrome OSバージョン 19.0.1084.52では実装されているのですが、ウィンドウの切れ目にあると

以下の様に線が入るバグが見受けられました。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。