63 画像背景が手前に飛び出すように見える立体表現

63　背景画像が手前に飛び出すように見える立体表現
制作・文＝樋口泰行（（有）樋口デザイン事務所）

To Use XHTML CSS JavaScript Photoshop Illustrator Fireworks 透過PNG

---

【1】側面表示用の画像を用意し、上部を斜めにカットし透明にしておく。画像がスムーズにつながるように、コンクリートの質感に見えるようなノイズを加えた画像として表現した



【2】下面表示用の画像として、【1】で作成した画像を90°回転し、上下反転させる。さらに濃度を暗くして影になるようにする



【3】コーナー用の表示する画像は、正方形で、斜めに側面と下面の画像が入るように、元の画像からコピー＆ペーストして作成する。あとは、3つのデータを透過PNGとして保存すればよい


XHTML

CSS

【4】コンテンツ表示するボックスの右側、下側、コーナーへ、3つのボックスの背景画像を割り当てる。ここではサイズ固定にしたが、コンテンツ部分をリキッドに対応させることも可能だ

▼使いどころ 右側と下側に100ピクセルのボックスを作成し、画像背景が手前に飛び出すようなボックスをつくった。このようにテキストや写真を入れるボックスを作成することで、奥行きがあるように見せることができる。