画像を使用しないで、立体的なリボン風のエレメントをスタイルシートで実装するチュートリアルをPV.M Garageから紹介します。
How To Create Depth And Nice 3D Ribbons Only Using CSS3
demo
背景のグレーに画像は使用されていますが、リボン風のエレメントの箇所には画像は使用されておらず、CSS3で角丸やドロップシャドウが実装されて立体的にデザインされています。
実装のイメージは、下記のようになります。
実装のイメージ
CSS3に対応していないIE7などでは、下記のように矩形のタブとして表示されます。
IE7でのキャプチャ
Post on:2010年1月13日
