[CSS]CSS3を使って、より美しいスタイルを適用するチュートリアル
Post on:2009年12月11日
CSS3の角丸やシャドウ、グラデーションを使用して、より美しくスタイルを適用するチュートリアルをAbduzeedoから紹介します。
![デモのキャプチャ](/wp-content/uploads-2009-2d/2009121101.png)
Playing with CSS3
demo
キャプチャはChrome3
CSS3に対応しているブラウザでは上記のように、角丸やシャドウ、グラデーションのスタイルが適用され、美しいレイアウトが再現されます。
完全に対応していないブラウザでは下記のようになります。
![デモのキャプチャ](/wp-content/uploads-2009-2d/2009121102.png)
キャプチャはFirefox3.5
チュートリアルでは「box-shadow」のエフェクトから一つずつCSS3のテクニックが紹介されており、全部を使用するだけでなく、部分的に使用したい場合にも参考になると思います。
![チュートリアルのキャプチャ](/wp-content/uploads-2009-2d/2009121106-01.png)
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> |
![チュートリアルのキャプチャ](/wp-content/uploads-2009-2d/2009121106-02.png)
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> |
![チュートリアルのキャプチャ](/wp-content/uploads-2009-2d/2009121106-04.png)
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