63 画像背景が手前に飛び出すように見える立体表現 | デザインってオモシロイ -MdN Design Interactive-

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

2018.9.19 WED



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

To Use
XHTML
CSS
JavaScript
Photoshop
Illustrator
Fireworks
透過PNG





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



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



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


XHTML

CSS

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


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

こんな記事も読まれています

この連載のすべての記事

月刊MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

9.3-9.9