CSS drop-shadows without images ? Nicolas Gallagher

CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例が色々公開されています。
一昔前なら、どう考えても画像を使っていると思ってしまうこうしたグラフィックもCSSで実現できてしまいます。
パターンも多くて実用的です。ヘッダ、メニュー等、ありとあらゆる部分に応用できそう。
画像編集ツールは一切不要です。



例えば、1個の要素を見てみましょう。



HTML では <div> にclassをふって中身は<p>のみだけというのに、これだけのデザインが実現します。



当然、要素を回転させることも出来ますが綺麗に描画できています。



なんとも夢のような話ですが、CSS3対応の Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ という大体のプラットフォームで動作するようです。
将来的にはこうしたものを実現するためのサンプル集やフレームワークなんかも充実してきそうですね。

関連エントリ

• ステップで学べるCSS3ボタンのデザインチュートリアル
• 便利なCSS3ツール6つ＋α
• CSS3のジェネレーター１４種
• IE6-8でもCSS3が使えるようになる「CSS3 PIE」