スタイルシートでデザインアップ-6
文字の装飾で遊びましょ。
■１■ 文字のバックをカラフルにっ
ちょいと文字のバックに色を付けてみたいって方は
* Ｍｉｓｔｅｒ-ＯＺ * こんな感じに仕上がりますです。
<FONT STYLE="font-size:20px;color:white;background:olive">
* Ｍｉｓｔｅｒ-ＯＺ *
</FONT>
|
文字サイズや文字色バック色を変えてみてお楽しみ下さい。
■２■ 色を重ねちゃうっ
色の付けた文字を重ねる技を使うと
Ｍｉｓｔｅｒ-ＯＺ
こんな感じに出来ちゃうんです。
<SPAN STYLE="width:180;height:30;font-size:25pt;color:#3b3b3b;
text-shadow: -2px -2px 0px pink, 2px 2px 0px yellow;">
Ｍｉｓｔｅｒ-ＯＺ
</SPAN>
|
数値の部分や色のコードを変更してお気に入りを探してみて下さい。
■３■ 文字に触れたら台詞が飛び出すっ
文字の上にカーソルが来たら何かご挨拶するってのも良いもんです。
Ｍｉｓｔｅｒ-ＯＺから一言 ←こんな風に気持ちが良い（かな？...）
<A href="#" onmouseover='alert("やあ o(^-^)o 頑張ってね");'>
<FONT STYLE="font-size:20px;color:olive">
Ｍｉｓｔｅｒ-ＯＺから一言</FONT></A>
|
あんまり乱発すると煩がられるのでご注意ですぞ。
■４■ ひっそりと台詞を差し出すっ
飛び出すっていうのが大袈裟で嫌だなあって方はひっそりとご挨拶する方法もありますよ。
こんな風にね。これなら煩がられないで済むかな....。
<TABLE><TD width="200">
<A href="#" onmouseover="msg.innerHTML='やあ o(^-^)o 頑張ってね'"
onmouseout="msg.innerHTML=''"><FONT color=olive size=4>
Ｍｉｓｔｅｒ-ＯＺから一言</font></A></TD>
<TD><SPAN ID="msg"></SPAN></TD></TABLE>
|
いろいろな組み合せで文字表現を楽しんでくださいね。
|