10-6

 スタイルシートでデザインアップ-6
   文字の装飾で遊びましょ。



■1■ 文字のバックをカラフルにっ
ちょいと文字のバックに色を付けてみたいって方は * Mister-OZ * こんな感じに仕上がりますです。

<FONT STYLE="font-size:20px;color:white;background:olive"> 
* Mister-OZ *
</FONT>

文字サイズや文字色バック色を変えてみてお楽しみ下さい。

■2■ 文字にシャドーを付けてみよっ
ちょっくら重みを出そうとシャドーなんか入れたりしたら
* Mister-OZ *
 こんな感じに仕上がりますです。

<DIV style="width:200;height:30;font-size:25px;color:olive; 
Filter:Shadow(color=silver,direction=150)">
* Mister-OZ *
</DIV>

色やサイズだけでなくシャドー方向(direction)もいじってみて下さいな。 (NNでは出来ないという報告がありますが)

■3■ 文字の上下左右を逆さまにっ
文字の上下や左右を逆さまにするなんてことをしたら Mister-OZ こんな感じや Mister-OZ こんな風になっちゃうんですね。

<SPAN style="width:110;height:20;font-size:22px;color:olive;Filter:FlipV">
Mister-OZ</SPAN>

<SPAN style="width:110;height:20;font-size:22px;color:olive;Filter:FlipH">
Mister-OZ</SPAN>

ここでは<SPAN>を使いましたが、<DIV>でやるとちょっと結果が違うんですね。 わかりますか?その違いって。
(これまたNNではダメなようですね ^^;)
■4■ 文字を波打たせちゃうっ
ぐにゃぐにゃ〜っと文字を波打たせる技を使うと Mister-OZ こんな感じに出来ちゃうんです。

<SPAN STYLE="width:180;height:30;font-size:25pt;color:olive;
Filter:Wave(Add=0.Freq=2.LightStrength=5,Phase=40,Strength=3)">
Mister-OZ
</SPAN>

数値の部分をいじってみると波打ちの大きさが調整できますよ。 (これまたIEだけらしいんですよねえ...困ったもんだ)

■5■ 文字に触れたら台詞が飛び出すっ
文字の上にカーソルが来たら何かご挨拶するってのも良いもんです。 Mister-OZから一言 ←こんな風に気持ちが良い(かな?...)

<A href="#" onmouseover='alert("やあ o(^-^)o 頑張ってね");'> 
<FONT STYLE="font-size:20px;color:olive"> 
Mister-OZから一言</FONT></A>

あんまり乱発すると煩がられるのでご注意ですぞ。

■6■ ひっそりと台詞を差し出すっ
飛び出すっていうのが大袈裟で嫌だなあって方はひっそりとご挨拶する方法もありますよ。
Mister-OZから一言
こんな風にね。これなら煩がられないで済むかな....。

<TABLE><TD width="200">
<A href="#" onmouseover="msg.innerHTML='やあ o(^-^)o 頑張ってね'" 
onmouseout="msg.innerHTML=''"><FONT color=olive size=4>
Mister-OZから一言</font></A></TD>
<TD><SPAN ID="msg"></SPAN></TD></TABLE>


いろいろな組み合せで文字表現を楽しんでくださいね。

     . . . . .   . . . . .