[CSS]画像を使用せずにスタイルシートで実装する立体的なエレメント

Post on:2010年1月13日

sponsors

画像を使用しないで、立体的なリボン風のエレメントをスタイルシートで実装するチュートリアルをPV.M Garageから紹介します。

背景のグレーに画像は使用されていますが、リボン風のエレメントの箇所には画像は使用されておらず、CSS3で角丸やドロップシャドウが実装されて立体的にデザインされています。

実装のイメージは、下記のようになります。

実装のイメージ

CSS3に対応していないIE7などでは、下記のように矩形のタブとして表示されます。

IE7でのキャプチャ