文字・特殊効果のスタイルシート具体例
文字の特殊効果に関してのスタイシートの具体的な書き方です。
スタイルシートだけで文字に影をつけたり発光させたりします。 更にその効果を細かく設定することもできます。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用就職・アルバイト情報
TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
文字の特殊効果に関してのスタイルシート具体例       ▲
ネットスケープナビゲーターでは効果は出ません
文字に影をつける
position: absolute; filter: shadow;

『どこに』に SPAN を使い<SPAN></SPAN>で文字を挟むと影が付きます。
文字にも画像にも使えます。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ position: absolute;filter: shadow; font-size:30pt;line-height:120%;}  
-->
</STYLE>
</HEAD>
<BODY> <SPAN>　SHADOW　</SPAN>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY> <SPAN style="position: absolute;filter: shadow; font-size:30pt;line-height:120%;"> 　SHADOW　</span>
</BODY></HTML>
　SHADOW　
文字に影をつける　細かな設定
position: absolute; filter: shadow (color=色名, direction=数値);

shadow の後に( )を追加し、影の色と方向を , (カンマ)で区切って指定することができます。
色は色名、色記号どちらでもOKです。影の方向は上を0度とし45度刻みで時計回りに指定します。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ position: absolute;filter: shadow(color=red,direction=135); font-size:30pt;line-height:120%;}  
-->
</STYLE>
</HEAD>
<BODY> <SPAN>　SHADOW&nbsp;</SPAN>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY> <SPAN style="position: absolute;filter: shadow(color=red,direction=135); font-size:30pt;line-height:120%;"> 　SHADOW&nbsp;</span>
</BODY></HTML>
　SHADOW 
注意)
影をつける文字を単にSHADOWと書かずにSHADOW&nbsp;としています。
&nbsp;は『半角スペース』を表す特殊記号です。
これをつけることによりSHADOWの後に半角スペースを空けています。 スペースがないと影が短く切れてしまいます。影が長い時は&nbsp;を複数入れます。
上に戻る
発光効果
position: absolute; filter: glow (color=色名);

filter に glow を指定し( )内に発光色を指定します。
下の場合は発光色を赤、文字の色を白に指定しています。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ position: absolute;filter: glow(color=red); font-size:30pt;line-height:120% ;color:white;}  
-->
</STYLE>
</HEAD>
<BODY> <SPAN>　SHADOW　</SPAN>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY> <SPAN style="position: absolute;filter: glow(color=red); font-size:30pt;line-height:120% ;color:white;"> 　SHADOW　</span>
</BODY></HTML>
　SHADOW 
発光効果　細かな設定
position: absolute; filter: glow (color=red ,strength=数値);

色の指定の後にカンマで区切り、 strength= 数字で発光の強さを指定します。 下の場合は strength=20 に指定しています。
発光を強くするとぼかしの範囲が広くなりますが、この場合はline-height:200% 等のように行間を広げないと 上下が切れてしまいます。 前後に関しても同じで、全角スペースを入れたり、半角スペースを表す特殊記号「&nbsp;」を使います。
<HTML><HEAD><TITLE>　　</TITLE>
<STYLE TYPE="text/css">
<!--
SPAN{ position: absolute;filter: glow(color=red ,strength=20); font-size:30pt;line-height:200% ;color:white;}  
-->
</STYLE>
</HEAD>
<BODY> <SPAN>　SHADOW&nbsp;&nbsp;</SPAN>
</BODY></HTML>
<HTML><HEAD><TITLE>　　</TITLE>
</HEAD>
<BODY> <SPAN style="position: absolute;filter: glow(color=red ,strength=20); font-size:30pt;line-height:200% ;color:white;"> 　SHADOW&nbsp;&nbsp;</span>
</BODY></HTML>
　SHADOW  
上に戻る TOPページに戻る 前に戻る 順番に次を見ていく