[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要素に七つのボーダーを配置。

デモのキャプチャ

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

デモのキャプチャ

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

sponsors

top of page

©2018 coliss