[CSS]CSS3を使って、より美しいスタイルを適用するチュートリアル

CSS3の角丸やシャドウ、グラデーションを使用して、より美しくスタイルを適用するチュートリアルをAbduzeedoから紹介します。

Playing with CSS3
demo
キャプチャはChrome3

CSS3に対応しているブラウザでは上記のように、角丸やシャドウ、グラデーションのスタイルが適用され、美しいレイアウトが再現されます。
完全に対応していないブラウザでは下記のようになります。

キャプチャはFirefox3.5

チュートリアルでは「box-shadow」のエフェクトから一つずつCSS3のテクニックが紹介されており、全部を使用するだけでなく、部分的に使用したい場合にも参考になると思います。

box-shadow

-webkit-box-shadow: 0 0px 10px #666;
-moz-box-shadow:0 0px 10px #666;
box-shadow: 0 0px 10px #666;

border-radiusとtext-shadow

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-shadow: #000000 0 -1px 1px;

gradient

background: #ddd -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(100, 100, 100, .5)), to(rgba(90, 90, 90, .1)));

Post on:2009年12月11日