文字や画像に影をつける
HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像に影を投影して表示したり、影付きにして表示させたりすることができます。
この効果は、InternetExplorer専用ですので、多くのブラウザで見映えを統一したい方にはお勧めしません。
他のブラウザでも影付きにして表示させたい方は、こちらの方法をおすすめします。→『表示位置の指定を使って文字を影付きにする』
影を投影する
<タグ名 style="position:absolute;filter:Dropshadow(ドロップシャドウ用パラメータ)>~</タグ名>
影付き文字にする
<タグ名 style="position:absolute;filter:Shadow(シャドウ用パラメータ)>~</タグ名>
- タグ名:DIV および SPAN タグが使用できます。
- ドロップシャドウ用パラメータ:下記の中から指定できます。『パラメータ名 = 値』という形式で指定します。複数のパラメータを指定する場合は、半角カンマで区切って併記してください。
カラーについて、詳しくはこちら→『16進数カラー見本』
パラメータ名 値の範囲と意味 color 影のカラー名称またはカラー番号 offX X(横方向)のオフセット値 offY Y(横方向)のオフセット値 positive true なら通常の影付き、false ならカットアウト表示 enabled true ならフィルタ効果有効、false なら無効 - シャドウ用パラメータ:下記の中から指定できます。複数のパラメータを指定する場合は、半角カンマで区切って併記します。
パラメータ名 値の範囲と意味 color 影のカラー名称またはカラー番号 direction 影の方向。0、45、90...というように45°単位で指定 enabled true ならフィルタ効果有効、false なら無効
サンプルです。IE以外のブラウザでご覧の方には、意図通り表示されておりません。
Dropshadowサンプル文字
Shadowサンプル文字
透明部分のある画像では、画像内の透明部分にも影が投影されます。JPG画像のように透明部分のない画像は、四角い枠に影が付きます。このサンプルのソースは、それぞれ次のようになっています。
<div style=" position:absolute; filter:Dropshadow( color=#ADADAD,offX=3,offY=3 );font-size:30px;">
Dropshadowサンプル文字<br>
<img src="sample/momo.gif" widht="130" height="105">
<img src="sample/momo.jpg" widht="130" height="105">
</div>
<img src="sample/momo.gif" widht="130" height="105">
<img src="sample/momo.jpg" widht="130" height="105">
<div style=" position:absolute; filter:Shadow( color=#ADADAD,direction=135 );font-size:30px;">
Shadowサンプル文字<br>
<img src="sample/momo.gif" widht="130" height="105">
<img src="sample/momo.jpg" widht="130" height="105">
</div>
<img src="sample/momo.gif" widht="130" height="105">
<img src="sample/momo.jpg" widht="130" height="105">
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス