【 HP作成質問箱 】

新しい質問は「新規入力」ボタンをクリックしてください。
| Page-1

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

  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両側の影を実現しているようです。

ありがとうございました。
| Page-1

 一覧 / 詳細


page update:23/11/28 16:31

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom