いままでのCSSで画像を使ってしかできなかった表現が、CSSのみで、できるようになった次世代のCSS3。実際にもう使われていたり、名前は広く知られていたりしますが、今回紹介するのはCSS3を活かしたボタンやメニューを集めたエントリー「12 Excellent CSS3 Button and Menu Techniques」です。

Radioactive Buttons

上記のようなCSS3の機能である、グラデーション、角アール、ドロップシャドウなどをうまく使った様々なボタンやメニューのデザインTipsがまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

■Apple’s Navigation bar using only CSS
アップルのナビゲーションメニューをCSSのみで再現したメニュー

　
　
　
　
　
■How To Create Depth And Nice 3D Ribbons Only Using CSS3
CSS3で表現する、メインのコンテンツボックスに巻き付いているかのようなリボンの表現。

　
　
　
　
　
■CSS3-only horizontal drop line tab menu
CSSで作るドロップラインメニュー。ここまでの事がコードだけで実現できるのは素晴らしいですね。

　
　
上記のほかにも様々なCSS3で制作されたボタンやメニューが公開されていました。画像で作りこんだ方が、精度も良いし、様々な表現が可能ですが、メンテナンスや修正対応などを考えるとCSSで作ってあったほうがかなり楽です。

CSS3を勉強しようと思っていた方には良いTipsだと思います。

12 Excellent CSS3 Button and Menu Techniques