あんまりCSS3をいじったことがなかったので、この機会にちょっといじってみました。角丸を表現できるborder-radiusとグラデーションを表現できるgradientです。
border-radius ＜角丸＞
.kadomaru {
width: 250px;
height: 50px;
background: #0066cc;
border-radius: 10px;
}
値を1つ指定した時は、4つの角に対して同じ半径が適用されます。
また、値を2つ指定した時は、左上と右下で同じ半径、左下と右上で同じ半径が適用され、値を4つ指定した時は、左上の半径、右上の半径、右下の半径、左下の半径が別々に適用されます。
border-radius ＜正円＞
.seien {
width: 50px;
height: 50px;
background: #0066cc;
border-radius: 25px;
}
widthとheightの半分の値をborder-radiusに指定すると正円にすることができます。
gradient ＜グラデーション＞
グラデーションには線形グラデーションと円形グラデーションの2種類があります。
1．線形グラデーション ＜上から下へ＞
.senkei_gradation {
width: 250px;
height: 50px;
background: -moz-linear-gradient(top, #0066cc, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#0066cc), to(#cccccc));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
2．線形グラデーション ＜左から右へ＞
.senkei_gradation_2 {
width: 250px;
height: 50px;
background: -moz-linear-gradient(left, #0066cc, #cccccc);
background: -webkit-gradient(linear, left top, right top, from(#0066cc), to(#cccccc));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
3．線形グラデーション ＜左下から右上へ＞
.senkei_gradation_3 {
width: 250px;
height: 50px;
background: -moz-linear-gradient(left 45deg, #0066cc, #cccccc);
background: -webkit-gradient(linear, left bottom, right top, from(#0066cc), to(#cccccc));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
線形グラデーションはFirefoxとWebkit系のブラウザ（Safari、Google Chrome）で指定の方法が違います。
-moz-linear-gradient(開始位置と角度, 開始色, 終了色);
-webkit-gradient(linear, 開始位置, 終了位置, form(開始色), color-stop(位置, 途中色), to(終了色));
4．円形グラデーション ＜中心から外へ＞
.enkei_gradation {
width: 50px;
height: 50px;
background: -moz-radial-gradient(center center, circle, #0066cc, #cccccc);
background: -webkit-gradient(radial, center center, 0, center center, 50, from(#0066cc), to(#cccccc));
border-radius: 10px;
}
5．円形グラデーション ＜位置を変更する＞
.enkei_gradation_2 {
width: 50px;
height: 50px;
background: -moz-radial-gradient(10px 25px, circle, #0066cc, #cccccc);
background: -webkit-gradient(radial, 10 25, 0, 10 25, 50, from(#0066cc), to(#cccccc));
border-radius: 10px;
}
6．円形グラデーション ＜正円にする＞
.enkei_gradation_3 {
width: 50px;
height: 50px;
background: -moz-radial-gradient(center center, circle, #0066cc, #cccccc 24px, rgba(255, 255, 255, 0) 25px);
background: -webkit-gradient(radial, center center, 0, center center, 50, from(#0066cc), color-stop(49%, #cccccc), color-stop(50%, rgba(255,255,255,0)), to(rgba(255,255,255,0)));
}
円形グラデーションも線形グラデーションと同じでFirefoxとWebkit系のブラウザ（Safari、Google Chrome）で指定の方法が違います。
-moz-radial-gradient(開始位置, 形状, 開始色, 終了色);
-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色));
CSSだけでこれだけの表現ができるのはスゴいですね。
画像を作らなくてもある程度のものは作れるので、軽量化もできます。CSS3恐るべし。IEも早く対応してくれれば良いのになあ。
若干おかしい部分があるかもしれませんが、許してください。もしあれば教えてください。
