CSS3の機能を試してみる

Push Your Web Design Into The Future With CSS3という記事を参考に、実際に帆船堂サイトへCSS3の機能を適用してみました。

[border-radius]四角いBoxをまーるく収めまっせー、という機能です。
border-radius 左：IE7、右Firefox3.0.5
[border-image]一枚の画像を元にBoxを囲む機能です。ここからWebデザインの新たな技法が出て来そうな予感です。
border-image 左：IE7、右：Google Chrome
文章やBoxに影を付加することが出来ます。文章に影を落とす事で、より自由な背景の組み合わせが行えるようになるでしょう。多分。
text-shadow box-shadow 左：IE7、右：Safari(Win)
[rgbaとopacity]opacityは現在も比較的良く使われている機能で、要素を透過することができます。 rgbaも透過機能なんですが、こちらはrgbをaします。 colorで指定したものを透過させるときに使うようです。
rgba opacity 左：IE7、右：Firefox3.0.5

あと、記事にはfontの機能も紹介されていますが、うまく実験をまとめられなかったので割愛しました。もう少し手軽に埋め込み用のフォントを作ることが出来るようになれば非常に強力な機能になるとおもわれます。 Webサイトだけではなくフォント関連は色々と課題がありそうです。
（2009.1.14 一覧画像に説明を追記しました。）