Profile Works Images B B S M . L . Links Diary
Brand-new Generations
Today'sSP. HPSample WebRadio e Mail My Bike Photo EX Kartz

フィルタサンプル

 スタイルシートのフィルタは、Internet Explorer 以外では表示されないようですが、90%以上の人がIE4.0以上を使用しているそうです。

 filter は、テキストや画像に使えます。
 全て、半角英数文字で書きます。
 カッコ内では、カンマで区切ります。
 :(コロン)や;(セミコロン)の後ろのスペースを忘れずに!(スペース無しでも、表示されるかも
 一部タグでは、WIDTH や HEIGHT を指定しないと表示されません。
 BACKGROUND や BACKGROUND-IMAGE で背景に画像を指定すると、うまく表示されないようです。
 ( )の中の要素は、はぶけるものもあります。

タグの書き方

 <DIV STYLE="xxx">○○○</DIV>

 xxxのところに書き込むと、○○○にフィルタがかかります。
 <DIV STYLE="filter: glow(color=Lime,strength=3); width: 100%; height: 40px;">○○○</DIV>
 という具合です。
 P,H1,DIV,SPAN,TR,TD 等に使えます。
 ほかに、HEAD内に書く方法や、別途 CSSファイルを作りそれをリンクをはって読み込ませる方法があります。

 

filter: glow
filter: glow(color=Lime,strength=3); width: 100%; height: 40px;
color=#00ff00 としても、かまいません。
strength を変えると陰の濃さが変わります。

 

filter: shadow
filter: shadow(color=#999999,direction=135,strength=20);
direction は陰を落とす方向です。1周360度とし、135だと右下に陰が出ます。

 

filter: dropshadow
filter: dropshadow(color=#999999,offX=5,offY=5);
offX=3, offY=3 は、右に3ピクセル、下に3ピクセルのところに陰を置きます。
逆側にするには、負の数字で指定します。

 

filter: blur
filter: blur(direction=225,strength=10,add=true);
addtrue にすると、元の文字や画像を重ねます。false にすれば解除できます。

 

filter: wave
filter: wave(add=1,freq=3,strength=3,phase=315,lightStrength=40);
add=1で、元の画像や色を重ねます。0 にすると解除できます。
freq 波の数を指定
phase 波が始まる位置を、0〜360で指定
lightstrength 光の強さを、0〜100で指定

 

▷ もどる ◁
Brand-new Generations
▷▶ HOME ◀◁
FC2 キャッシング 無料ホームページ ブログ blog