遠近感のあるテーブル 

遠近感を感じる台形のフレームです。左右の三角の素材は小さな物を
ブラウザで拡大表示している為
いくら大きなテーブルにしても超軽量!というのがウリです。
使い勝手が良いかどうかは別問題という事で(笑)
道路バージョンも作ってみました。

【透過処理済】

下の20x20pxの三角をタグで大きくして、縦3つに割ったテーブルの左右に貼ります。
例・<IMG src="frame_tr01.gif" width="20" height="100" border="0">
詳しくは下のQ&Aを見てね!

   
 
 
▲おもちゃを置いてみました。▲

▼タグ見本▼
画像 ファイル名 大きさ(px)
frame_tr01.gif 20x20 #FFFFFF
frame_tr02.gif 20x20
frame_tr03.gif 20x20 #FF3300
frame_tr04.gif 20x20
frame_tr05.gif 20x20 #000000
frame_tr06.gif 20x20
frame_tr07.gif 20x20 #CCCCC
frame_tr08.gif 20x20
frame_tr09.gif 10x25

50
▲道路バージョンです。▲

▼タグ見本▼

素材屋レトロ トップに戻る

遠近感のあるテーブルQ&A

◆なんだか良くわかりません◆

こんな感じです↓


画像として貼り付けます
セルの背景に三角と同じ色を設定してください
こちらも画像として<IMG src="三角のファイル名">です

画像として貼り付けた三角を縦方向height="ピクセル数"横方向width="ピクセル数"で拡大します。
テーブルの枠は消してください。例・<TABLE cellpadding="0" cellspacing="0">
真ん中のセルの横幅を変えれば文字などを入れるスペースが大きくなります。

◆台形が崩れる◆

三角の縦幅は左右同じにしてください。
三角の縦幅よりも真ん中のセルの内容が大きいと台形が崩れてしまいます。
三角を大きめにするか、どのブラウザでも文字が一定に表示されるようにスタイルシートで文字の大きさを指定してください。

◆応用編◆

左右の三角の幅を変えると斜めから見た感じの遠近感になります。
下は三角とタグ打ちのみで作った入り口のイメージ。

入り口

素材屋レトロ トップに戻る