丸角とシャドウでつくるタブ

丸角のタブも、今までは画像を使ってデザインしてました。CSS3 では画像を使わずに、丸角やグラデーション、ボックスシャドウなどを表現できるので、CSS のみで下記のようなタブができちゃうんですねー！
また、タブにマウスをのせると、ジワーっと背景色が変ります（Firefox 3.6、IE ではアニメーションは表現できません。Firefox 3.7 は大丈夫なようです。Safari、Chrome は OK です）。

 

4つめのシャドウ用の [li] ダグは、position: absolute で絶対配置するんですね！そして z-index で重なり順もコントロールするのを忘れずに！今まで画像を使って表現していた丸角、グラデーションを使っていたタブも CSS3 ならとても簡単にできてしまいますね！

CSS3 はコーディングをとっても楽にしてくれて、表現の自由度を広げてくれます。これから色んなアイデアで、素敵なデザインがたくさん生まれてくると思うと、本当にわくわくします。そんなCSS3のアイデアをたくさん集めた、The Ultimate Roundup of 55+ CSS3 Tutorials からいくつかサンプルを紹介しました！