フィルターを使う
フィルターは 文字だけでなく画像やテーブル、
テキストエリアなど、いろいろなものに適用することができます。
なお、説明の便宜上「文字」として説明します。
フィルターを使う上での注意ですが、
フィルターを使ったページを表示するのには、
比較的大きなマシンパワーが必要になります。
また、NN4.0では、レイアウトが崩れてしまう場合もあるようです。
さらに、Operaなどには対応していません。
そのため１つのページに
多くのフィルターを使うことはお勧めできません。
・影つきの文字にします
style="width:100%; filter:shadow(color=#------,direction=影の角度,strength=影の長さ)"
width:---%は、ウィンドウに対する「文字」の幅を指定します。
通常は100%にしておきます。
影の色や角度などはカンマ「,」で区切って指定します。
<span style="width:100%; filter:shadow(color=#7799ff,direction=45,strength=5);">
影つきの文字にします</span>
↓
影つきの文字にします
filter:blur(direction=--,strength=--) を使っても
同じようなことができますが、
画像に適用する場合には、出来上がりが若干異なるようです。
<img src="img/awa.png" style="filter:Blur(direction=45, strength=20);">
↓
なお、画像の表示に失敗しても、
このようにフィルターはかかります。
・文字を半透明にします
style="width:100%; filter:Alpha(opacity=--);"
-- には、0から100の値を入れます。
0が透明、100が不透明です。
<b style="width:100%; filter:Alpha(opacity=40); font-size:150%;">半透明</b>
↓
半透明
・文章にグラデーションをかけます
style="width:100%; filter:Alpha(opacity=---,finishopacity=---,style=--);"
| opacity=--- | 透明度 １ |
| finishopacity=--- | 透明度 ２ |
| style=-- | グラデーションの形 0〜3で指定 |
<font color="#804000">
<b style="width:100%; filter:Alpha(opacity=100,finishopacity=20,style=2);">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</b>
</font>
↓
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
この他にグラデーションをかける領域を指定することができます。
startX=スタート地点のX座標,
startY=スタート地点のY座標,
finishX=終了地点のX座標,
finishY=終了地点のY座標
・文字に影をつけます
style="width:100%; filter:dropshadow(color=#------,offX=--,offY=--);"
color=#------ では、影の色を指定します。
offX=-- 影を表示する位置 Ｘ座標
offY=-- 影を表示する位置 Ｙ座標
<span style="width:100%; filter:dropshadow(color=#0080ff,offX=3,offY=3);">
どんがらどんがら
</span>
↓
どんがらどんがら
・文字を左右反転します
style="filter:flipH();"
<table border="2" bordercolor="#7799ff" style="filter:flipH();">
<tr><td>文字abc123</td></tr>
</table>
↓
・文字を上下反転します
style="witdh:100% filter:flipV();"
<table border="2" bordercolor="#7799ff" style="filter:flipV();">
<tr><td>文字abc123</td></tr>
</table>
↓
・複数のフィルタを指定します
なお、複数のフィルタを指定する場合はスペースで区切って指定します。
「filter」を入れる位置やセミコロン「;」を付ける位置に
注意してくださいね。
<table border="2" bordercolor="#7799ff" style="filter:flipH() flipV();">
<tr><td>文字abc123</td></tr>
</table>
↓
・文字にマスクをかけます
style="width=100%; filter:Mask(color=#------);"
color=#------ では、マスクの色を指定します。
<table border="2" bordercolor="#7799ff">
<tr><td style="width=100%; filter:Mask(color=#7799ff);">文字</td></tr>
</table>
↓
・文字に波をかけます
style="width=100%; filter:Wave(add=0,freq=2,lightstrength=20,phase=120,strength=3)"
add=--
1のときは、文字に波をかけた後、
元の文字をその上に表示します。
0のときは、文字に波をかけるだけで終わりです。
freq=--
波の個数を指定します。
lightStrength=---
0から100の間で光の強さを指定します。
0に近いほうが明るい色になります。
phase=---
波の向きを指定します。
0から360の間で指定します。
strength=--
波の強さを指定します。
あんまり大きな値にするとぐちゃぐちゃになります。
<font size="6" color="#ffff80" style="width:100%;
filter:wave(add=0,freq=2,lightstrength=20,phase=120,strength=10)">
<b>
簡単！ホームページ作成講座<br> ×8行
</b>
</font>
↓
簡単！ホームページ作成講座
簡単！ホームページ作成講座
簡単！ホームページ作成講座
簡単！ホームページ作成講座
簡単！ホームページ作成講座
簡単！ホームページ作成講座
簡単！ホームページ作成講座
簡単！ホームページ作成講座
これでスタイルシートは終了です。
おつかれさまでした。
メニューに戻ります。
