その他
2011年12月23日
CSS3で多用するようになったプロパティ3つ
こんにちは、鴨田です。
スマホ対応サイトやMonacaを使ってアプリを 作る場合、
CSS3を使って、なるべく画像を作らない傾向にあると思います。
きっと誰もが、よく使うようになった(これからなっていく)プロパティについて、
ちょっと書いてみたいと思います。
１．border-radius
box要素を角丸にしてくれます。
コード：
.box {
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
サンプル：
こんな感じになります。
それぞれの角で大きさを変えることも出来ます。
コード：
.box2 {
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 11px 22px 33px 44px / 44px 33px 22px 11px;
-moz-border-radius: 11px 22px 33px 44px / 44px 33px 22px 11px;
-webkit-border-radius: 11px 22px 33px 44px / 44px 33px 22px 11px;
}
サンプル：
border-radius: 左上横→11px 右上横→22px 右下横→33px 左下横→44px / 左上縦→44px 右上縦→33px 右下縦→22px 左下縦→11px;
となりますが、こういう使い方はしないと思います。
やるとすれば、上側だけ角丸にさせたいなどという時でしょうか。
コード：
.box3 {
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 20px 20px 0 0 / 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0 / 20px 20px 0 0;
-webkit-border-radius: 20px 20px 0 0 / 20px 20px 0 0;
}
サンプル：
２．box-shadow
box要素に影を付けてくれます。
コード：
.box4 {
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 20px;
box-shadow: 5px 5px 5px #999;
-moz-box-shadow: 5px 5px 5px #999;
-webkit-box-shadow: 5px 5px 5px #999;
}
サンプル：
box-shadow: 横方向のずれ→5px 縦方向のずれ→5px にじみ度合い→5px 影の色→#999;
となります。マイナスにも出来るので、いろんな方向に影を作ることが出来ます。
３．background-gradient
背景色をグラデーションすることが出来ます。
コード：
.box5 {
width: 300px;
height: 200px;
border: 1px solid #f00;
border-radius: 20px;
box-shadow: 5px 5px 5px #999;
-moz-box-shadow: 5px 5px 5px #999;
-webkit-box-shadow: 5px 5px 5px #999;
background: -moz-linear-gradient(top, #fff, #666);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#666));
}
サンプル：
.box5 {
width: 300px;
height: 200px;
border: 1px solid #f00;
border-radius: 20px;
box-shadow: 5px 5px 5px #999;
-moz-box-shadow: 5px 5px 5px #999;
-webkit-box-shadow: 5px 5px 5px #999;
background: -moz-linear-gradient(top, #fff, #333 50%, #666);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5, #333), to(#666));
}
サンプル：
以上になります。
今まで画像を使っていたことがCSSだけで手軽に出来るようになっているので、積極的に使っていきたいですね。
