【 ＨＰ作成質問箱 】

【ＨＰ作成質問箱/詳細】　一覧 / 詳細

　 No.9865　tableの両側に影を付けたい

[まこじ] [ブラウザ]　 09/01/29 (木) 14:12

HTMLの学習のために既にある下記のサイトを勝手ながら真似ています。
　　http://gshop2.com/main/

画面の中央に内容を配置するために、内容の殆んどをtable内に記述して、<table align=center>としました。

さて、元のHPでは中央に配置した内容の右、下、左を取り巻くようにして影が付いています。

最初に
filter:progid:DXImageTransform.Microsoft.Shadow(Color=blue,Strength=20,Direction=90);
filter:progid:DXImageTransform.Microsoft.Shadow(Color=blue,Strength=20,Direction=270);
としてみましたが、後の文によって先の文が訂正されてしまうのか、tableの両側に影が出来ません。

次に
filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=20);
とした状態が添付ファイルです。

影が四方に出来てしまい、ページ最上段を左から右へ横断しているバーの上にまで影が出てしまいました。HPアドレスの状態です。

どうすれば三方にだけ影を出すことが出来るでしょうか。

▼

▼

▼

　 No.9866　Re:tableの両側に影を付けたい

[atom] [ブラウザ]　 09/01/29 (木) 15:49

今回のフィルターは定義が全く同じなので、当然、どんどん上書きされます。

参考にされてるページを詳しく見たわけではないので、はっきりとはいえませんが、一般的には画像を背景に埋め込む方法で行います。

左側、右側、下側の画像を横幅にあわせて、それぞれ別々に作り、それぞれ3つの背景に埋め込む方法です。

左右の幅、上下の高さが常に固定なら、そのボックスと同じ画像を作って、全体の背景に埋め込めば可能です。

▼

▼

▼

　 No.9869　Re^2:tableの両側に影を付けたい

[まこじ] [ブラウザ]　 09/02/01 (日) 15:07

table両側の影にカーソルを置いて右クリック。「名前を付けて背景を保存」とすると、wrapper_01.gifというファイル名がデフォルトで入ってくるので、多分に元のサイトもatomさんがご指摘のように、影を予め画像として用意することでtable両側の影を実現しているようです。

ありがとうございました。

▼

▼

▼

　一覧 / 詳細