心にうつりゆく由無しごと

スタイルシートを使うと、結構いろんなことが出来ますね。
かなり驚きました。

下の画像は全部同じ画像です。
一番左の画像が何も処理していないオリジナル画像です。

未処理	透明化	グレースケール	ブレ
左右反転	上下反転	ネガ	X線

いくつかを組み合わせてこんなことも。
（下の画像にマウスを合わせてください）

以前はこれと同じことをやろうと思ったら、画像を2枚用意し、JavaScriptを使って実現していました。
しかし上の場合は、画像は一番最初の未処理画像1枚のみ。
スタイルシートとDHTMLを使ってロールオーバーを実現しています。
ソースは以下のとおりです。

<img src="http://www.○○○.com/aaa.jpg"
style="filter: gray() alpha(style=0, opacity=50)"
onmouseover="this.style.filter=''"
onmouseout="this.style.filter='gray() alpha(style=0, opacity=50)'">

こちらは古ぼけた日本の国旗の出来損ないのような画像ですが、

スタイルシートを使って、まわりの黄色い部分を透過し、左上に向かって斜めのグラデーションで透明化させ、さらに影をつけてみました。

ずいぶん立体的になりました。
上の二つの画像はどちらも同じ画像です。

<img src="http://www.○○○.com/aaa.jpg"
style="filter: chroma(color=#e0e080)
alpha(style=1,opacity=0,finishopacity=100,startx=0,starty=0,finishx=90,finishy=90)
shadow(direction=135)">

ひとつ気になるのが、ブラウザの対応です。
IE5.0以上ならば問題なく見れているはずですが、それ未満やNNでは見れないと思います。
すいません。