[CSS]簡単にCSS3の新しいプロパティを楽しめるチュートリアル

CSS3の新しいプロパティで、Firefox, Safari, Chromeなど現在のブラウザで実装を実現できるスタイルシートのチュートリアルをWeb Designer Depotから紹介します。

5 CSS3 Design Enhancements That You Can Use Today

オリジナルは下記のように実装されており、これにスタイルを適用します。

スタイルを適用しないオリジナル

• 1. カラーを透過
• 2. ボックスを角丸
• 3. テキストにシャドウ
• 4. ボックスにシャドウ
• 5. 背景をマルチプル
• SPECIAL BONUS: 画像を回転

1. カラーを透過

背景、ボーダー、テキストなどのカラーの不透明をコントロールします。

対応ブラウザ

Safari4, Fx3.0.5, Chrome1

.topbox {
color: rgb(235,235,235);
color: rgba(255,255,255,0.75);
background-color: rgb(153,153,153);
background-color: rgba(0,0,0,0.5);
border-color: rgb(235,235,235);
border-color: rgba(255,255,255,0.65);
}

IEでは、filterで実装できます。

<!--[if IE]>
<style type="text/css">
.pretty-box{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0000050,endColorstr=#0000050);
zoom:1;
}
</styel>
<![endif]-->

2. ボックスを角丸

ボックスを角丸にします。

対応ブラウザ

Safari3, Fx1, Chrome1

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

3. テキストにシャドウ

テキストにシャドウをつけます。

対応ブラウザ

Safari3, Fx3.0.5, Chrome1

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

4. ボックスにシャドウ

ボックスにシャドウをつけます。

対応ブラウザ

Safari4, Fx3, Chrome1

-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

5. 背景をマルチプル

背景に複数の画像を配置します。

対応ブラウザ

Safari1.3, Chrome1

background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

SPECIAL BONUS: 画像を回転

画像を回転させます。

対応ブラウザ

Safari4, Fx3.5, Chrome1

-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);

Post on:2009年9月18日