枠からはみ出す画像をpositionを使わずに配置するテクニック

カテゴリ:CSSテクニック 2008年7月 4日 17:29

こういった、"枠からはみ出した画像を配置する" というデザインは多々あると思います。
これを、position: absoluteなどで配置するのは簡単ですが、ドロップシャドウなど半透明部分を使用しないと配置がむずかしい画像の場合、少々やっかいだったりします。n

そこで、position: absoluteを使わずに、背景を使用して設定する方法を書いてみたいと思います。n

▼EntryMore▼

CSSソース

HTMLソース

テクニック詳細

内容はいたって簡単です。
まず、キーとなる画像を用意します。(サンプルでは青い光っぽいやつ)
それを配置し、背景(サンプルでは黒い部分)と、コンテンツの背景(サンプルでは白い部分)をそれぞれ決めて、はみ出し部分の位置をデザインします。n

そして、メインビジュアルとなる部分をそのまま白い背景と同じ幅にして(はみ出す部分を削って)一緒に切り出します。
そうすると、以下のような画像になります。
メインビジュアル切り出しイメージ

さて、続いてコンテンツの背景の白い部分 "のみ" を非表示にして、青いオブジェクトと、全体の黒い背景だけの画像にし、それを書き出します。
メインビジュアル切り出しイメージ

この 2 つの画像を書き出したら、あとはそれをずれがないように配置するだけです。
サンプルではwrapの ID のついた div に黒いほうを、headerの ID のついた div に白いほうの画像を背景として配置しています。
ここでの注意点としては、どちらの画像もセンタリング配置したときにしっかりと重なるように切り出すことです。n

配置方法は、wrap の背景は左右センタリング配置し、header の背景は左上起点に配置します。
そして、header を内包している wrapInner をセンタリング配置することで、白い背景の切れた部分と、その下に配置された黒い背景の続きの部分がぴったりと重なり、まるではみ出しているように見えるようになります。n

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/88