2012/08/21更新

[CSS3] ビジュアルを変化させるCSS3 Filterの内容説明と、Filter機能を体感できるページを作りました

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
今日は、最近Safariが対応したCSS3 Filterについて、簡単に試せるページを作りました。
今日はCSS3 Filterの内容説明とそれを試せるページの紹介させて頂きたくブログを書きました(・∀・)

css3 filter sample



CSS3 Filterとは

CSS3のFilterとは、Adobe PhotoshopやGIMP2などの描画ツールで良く用いる、 画像に効果を追加する事の出来る機能を、HTML要素にも使えるようにした機能です。

CSS3 Filterでは、以下の機能が使えます。
  • grayscale:白黒表示にできるフィルター
  • sepia:セピア表示にできるフィルター
  • hue-rotate:Hueという色相を変化させるフィルター
  • invert:表示色を反転させるフィルター
  • opacity:透明度を変化させるフィルター
  • brightness:輝度を変化させるフィルター
  • contrast:コントラストを変化させるフィルター
  • blur:ガウシアンぼかしをかけることのできるフィルター
  • drop-shadow:ドロップシャドウをかけるフィルター

上記フィルターはパーセンテージなどの数値を指定する事で、効果の程度を指定することが出来ます。
新しい機能なので、使えるブラウザは限られますが、使ってみると面白い機能です。



CSS3 Filterを試せるページを作りました

色々と面白そうなフィルターが多いので、フィルターをかける度合いなどを指定して、 簡単にフィルターを試せるページを作りました。
各フィルター毎に、どんな効果なのかを把握できれば幸いです。

CSS3 Filter Sample Page
http://www.yoheim.net/labo/html5/css3/filter.html

使ってみてこんな感じかーと、感じて頂ければ良いなと思い、作りました。

CSSの設定内容も記載しておりますので、それも役に立てば幸いです。



参考資料

CSS3 Filterについては、以下資料が参考になりました(*´∇`*)
- https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html#FilterFunction



最後に

使えるブラウザは限られますが、いくつかの効果を簡単に表現できるというのは魅力的です。
表現の幅が広がったように感じました。

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。