alpha( )

alpha を使うと、画像・文字・背景色を半透明に出来ます。よくテーブルにalpha を
使ってbody に付けた写真の背景画像を透かしているのを見かけますね。






上のは<div>に緑の背景とalphaを付けましたが、見て分るように<div>内に
書いた文字も薄くなります。alpha の強さはopacity を0〜100に変更して決め、
また4通りのスタイルは、style を0〜3にします。

shadow( )

shadow はその名の通り影を付けるものです。影の色と向きの変更が出来ます。

dropshadow( )

これも名前の通り影ですが、dropが付く分上のshadowとはちょっと違います。



dropshadow はpositiveを0か1にする事で違いますが、1の方が多く使われます。
影の位置もoffxとoffyの値を変える事で出来ます。- マイナスの値も可能。

blur( )

blur はぼかすフィルターです。

fliph( )

左右反転します。

　→　

<img src="image/fish1.png" style="filter:fliph();">

flipv( )

上下反転します。

　→　

<img src="image/fish3.png" style="filter:flipv();">

gray( )

gray は名前通りグレーにするもので、カラーの文字や画像をモノクロにします。

　→　

<img src="image/fish2.png" style="filter:gray();">

wave( )

画像や文字などを名前通り波状にします。

　→　

<img src="../card2/submarine/fish1.png"
style="filter:wave(freq=5,lightstrength=20,add=0)">

glow( )

内容物の回りに放射状の光のような色を付けます。

　→　
<span style="width:120px;height:85px;padding:12px;
filter:glow(color=00ff00,strength=10)">
<img src="image/fish2.png"></span>

放射状の色とサイズを指定できます。文字にも使えます。

mask( )

内容物を透明にして回りに色を付けます。

　→　

<img src="../card2/submarine/fish1.png" style="filter:mask(color=66aaff)">

周りの色はお好みを指定できます。文字を透明にすることも出来ます。

chroma( )

画像などの選択した色を透明にするフィルターです。

　→　

<img src="image/fish1.png" style="filter:chroma(color=c6c6c6)">

薄めのグレーを消してみましたが、このフィルターで面白い事が出来るかも？

progid:DXImageTransform.Microsoft.gradient( )

何だか分り難いけど、簡単に言えば背景のグラデーションです。
初めの色と最後の色を決めてグラデーションし、縦方向か横方向ができます。



この他にもフィルターはありますが、フィルター単体では余り使わない感じです。
フィルターもクラスを使って各タグに取り込むと良いと思います。