CSSで画像にフィルタをかける

画像をPhotoshopなどのソフトで加工しなくてもスタイルシートでフィルタをかけることができます。
まずは以下サンプルの上にマウスを重ねて下さい。

マウスを重ねると、写真がカラーになります。
これは通常の考えでしたら、2枚の画像を用意してロールオーバーを作りますが、これは1枚の画像を使ってスタイルシートの記述のみでロールオーバーをさせています。

続いて効果の違うサンプル。

最初の白黒からカラーへのロールオーバーでは、画像に直接CSSを指定しています。
以下のような感じです。

<img src="○○.jpg" style="filter:Gray" onMouseover="this.style.filter=''" onMouseout="this.style.filter='gray'">

ロールオーバーにしない場合は以下のタグです。

<img src="○○.jpg" style="filter:Gray">

「gray」の部分が白黒のフィルタです。
この部分を変えることにより様々な変化を出すことができます。

フィルタとロールオーバーを使えばこんなボタンもできますね。


フォルタサンプル
Normal

Alpha(opacity=30)

Blur

FlipH

Xray


« BACK | NEXT »

HP作成テクニック

最近のエントリー