TOPページ >  フィルタ(特殊)効果で文字や画像を修飾する > 文字や画像に影をつける

文字や画像に影をつける

HTML言語を使用したホームページやブログなどのウェブサイトでは、文字や画像に影を投影して表示したり、影付きにして表示させたりすることができます。

この効果は、InternetExplorer専用ですので、多くのブラウザで見映えを統一したい方にはお勧めしません。

他のブラウザでも影付きにして表示させたい方は、こちらの方法をおすすめします。→『表示位置の指定を使って文字を影付きにする

影を投影する
<タグ名 style="position:absolute;filter:Dropshadow(ドロップシャドウ用パラメータ)></タグ名>
影付き文字にする
<タグ名 style="position:absolute;filter:Shadow(シャドウ用パラメータ)></タグ名>
  1. タグ名:DIV および SPAN タグが使用できます。
  2. ドロップシャドウ用パラメータ:下記の中から指定できます。『パラメータ名 = 値』という形式で指定します。複数のパラメータを指定する場合は、半角カンマで区切って併記してください。
    パラメータ名値の範囲と意味
    color影のカラー名称またはカラー番号
    offXX(横方向)のオフセット値
    offYY(横方向)のオフセット値
    positivetrue なら通常の影付き、false ならカットアウト表示
    enabledtrue ならフィルタ効果有効、false なら無効
    カラーについて、詳しくはこちら→『16進数カラー見本
  3. シャドウ用パラメータ:下記の中から指定できます。複数のパラメータを指定する場合は、半角カンマで区切って併記します。
    パラメータ名値の範囲と意味
    color影のカラー名称またはカラー番号
    direction影の方向。0、45、90...というように45°単位で指定
    enabledtrue ならフィルタ効果有効、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>
<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>

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
文字や画像をX線をあてたような白黒で表示する
文字や画像を補色に反転する
文字や画像を白黒で表示する
文字や画像を発光して表示させる(発光効果)
文字や画像を反転させて表示する
文字や画像に影をつける
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス