CSSのfilterを使う時に便利なサイト「CSS Filter Effects」!

2015/10/04

こんにちは。
今回はCSSのfilterを使う時に便利なサイト「CSS Filter Effects」!です。

CSSのfilterを使う時に便利なサイトを見つけたので紹介します。
画像にCSSのfilterのエフェクトのかかり具合を見ながら調整する事ができます。
勿論、コードをコピーできますので、調整後にコピーして自分のサイトなんかに貼り付けちゃいましょう。

CSSのfilterを使う時に便利なサイト「CSS Filter Effects」!

CSS Filter Effects

css-filter-effects

http://www.cssreflex.com/css-generators/filter/

 

「CSS Filter Effects」の使い方

css-filter-effects2

使い方は簡単で、ゲージをスライドさせるか、ピクセルの値を変更するかして、エフェクトのかかり具合を調節するだけです。
あとはコードがリアルタイムに反映されますので、調節後に好きなように使っちゃいましょう。
「Blur」を例に使ってみましたが、他にも「Brightness」、「Contrast」、「Grayscale」、「Hue Rotate」、「Invert」、「Opacity」、「Saturate」、「Sepia」、「Drop Shadow」があります。

 

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

いかがでしたか。CSSのfilterを使う時に使ってみてはどうでしょうか。
以上でCSSのfilterを使う時に便利なサイト「CSS Filter Effects」!でした。

Related Post

topへ戻る