[CSS]CSS3を使って、より美しいスタイルを適用するチュートリアル
Post on:2009年12月11日
sponsors
CSS3の角丸やシャドウ、グラデーションを使用して、より美しくスタイルを適用するチュートリアルをAbduzeedoから紹介します。
Playing with CSS3
demo
キャプチャはChrome3
CSS3に対応しているブラウザでは上記のように、角丸やシャドウ、グラデーションのスタイルが適用され、美しいレイアウトが再現されます。
完全に対応していないブラウザでは下記のようになります。
キャプチャはFirefox3.5
チュートリアルでは「box-shadow」のエフェクトから一つずつCSS3のテクニックが紹介されており、全部を使用するだけでなく、部分的に使用したい場合にも参考になると思います。
box-shadow
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> -webkit-box-shadow: 0 0px 10px #666; -moz-box-shadow:0 0px 10px #666; box-shadow: 0 0px 10px #666; </textarea> |
border-radiusとtext-shadow
|
1 2 3 4 5 6 |
<textarea name="code" class="css" cols="60" rows="5"> -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; text-shadow: #000000 0 -1px 1px; </textarea> |
gradient
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> background: #ddd -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(100, 100, 100, .5)), to(rgba(90, 90, 90, .1))); </textarea> |
sponsors
