[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック

CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。

Multiple Backgrounds and Borders with CSS 2.1

CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。

実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。
下記にその実用的で面白い効果をもったデモを紹介します。

マルチプル バックグランド

デモ：Multiple Backgrounds with CSS 2.1
CSSファイル：backgrounds.css

ブラウザのサイズを変更すると、背景にパララックス（視差）効果が生まれます。

画像を使用せずに、高さの異なるカラムに等しい高さの背景を表示します。

画像を使用しないDribbble風のボタン。

一枚の画像（flowers.png）と一つのエレメントだけでコーナーに配置。

箱のグラフィックが常にはみ出した位置に表示されます。

右上が紙を折ったようなエフェクト。

一つのdiv要素に三つの異なる画像を配置。

マルチプル ボーダー

デモ：Multiple Borders with CSS 2.1
CSSファイル：borders.css

内側にボーダーを配置。

一つ以上の子要素をもったdiv要素に七つのボーダーを配置。

七つのボーダーはどこか一辺だけでも配置可能。

ここで使用されているボーダーは画像を使用していません。