CSSで画像にフィルタをかける
画像をPhotoshopなどのソフトで加工しなくてもスタイルシートでフィルタをかけることができます。
まずは以下サンプルの上にマウスを重ねて下さい。
マウスを重ねると、写真がカラーになります。
これは通常の考えでしたら、２枚の画像を用意してロールオーバーを作りますが、これは１枚の画像を使ってスタイルシートの記述のみでロールオーバーをさせています。
続いて効果の違うサンプル。
最初の白黒からカラーへのロールオーバーでは、画像に直接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
