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

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

デモのキャプチャ

How To Create Depth And Nice 3D Ribbons Only Using CSS3
demo

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

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

実装のイメージ

実装のイメージ

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

デモのキャプチャ

IE7でのキャプチャ

sponsors

top of page

©2018 coliss