CSS3をバリバリ使ってトップページを作ってみた

やっほ。

ちょっとCSS3を使ってトップページを書いてみたよっ

こんな感じになったよっ

対応状況としちゃ、こんな感じ。

ブラウザ名	対応状況
Safari	すばらっ
Chrome	すばらっ
Firefox	3.6でまぁまぁ
Opera	むー・・・

で、現状のCSS3プロパティの実装具合は、使った範囲ではこんなん。※は実装中か、今後実装を予定してるもの。どーもW3Cの実装が当面先のものや実実装がかな〜り違うやつがあるみたいなので、将来的にはごっつり書き直さないといけないかもねっ

	Safari	Chrome	Firefox	Opera
gradient	○	○	△	×
box-reflect	○	○	×	×
border-radius	○	○	○	※
box-shadow	○	○	△	※
display: box	○	○	△	×
transition-duration	○	○	※	※
transform	○	○	※	※
transition-timing-function	○	○	※	※

さて、実際のページは・・・・ここだぁ！　SafariかChromeで見てね〜　透過処理ガリガリ使ってるから、処理ちょっと重いんだ〜。ごめんねっ

え？　IE？　なにそれ美味しいの？

でわでわっ

2010/02/27追記

ちょとだけ修正。不要な要素をがっつりカットしてスマートなHTMLになたよっ　::beforeと::afterて便利ねぇ。

2010/03/05追記

またちょと修正。もうちょっと見やすくしてみたよ〜。transform-originとtext-shadowを追加してみたんだ。