よく使うCSS3デザインいろいろ

CSS3対応ブラウザでは画像を使うなどめんどくさいことをしなくても手軽に角が丸いボックスや影をつけて文字装飾やデザインが容易に、幅広くできる。手始めに、ブラウザに依存する"-webkit-"や"-moz-"をつけなくてもIEを除けば幅広く装飾ができるborder-radiusとtext-shadow,box-shadowを紹介してみる。

注：Internet Explorerでは適用されません。（IE9にて確認）

角を丸めるborder-radius

IE Firefox Chrome

border-radius: r;

r:半径
各頂点に対する半径を指定することもできる他、角を楕円にすることもできる。あまり細かいことは実用性はない気がするので、気になるのならGoogleで調べれば良いであろう。
例

border-radius: 5px;
padding: 5px;
margin:10px;
border:2px solid #f60;
background:#fa3;

表示例

影をつけるtext-shadow, box-shadow

IE Firefox Chrome

text-shadow: color x y blur;
box-shadow:(inset/outset) color x y blur;

color: 影の色
y:影縦方向の位置
x:影横方向の位置
blur: ぼかしの度合い
inset/outset:(省略可：デフォルトはoutset) insetでは内側に影
単に影をつけるというだけではなく、彫り込んだような表現も可能。

例

padding: 5px;
margin:10px;
border:2px solid #fff;
background:#bbb;
color:#333;
text-shadow:#fff 1px 1px 2px;
box-shadow:#333 1px 1px 2px;

表示例

例

padding: 5px;
margin:10px;
border:2px solid #fff;
background:#bbb;
color:#04f;
text-shadow:#fff 1px 1px 2px;
box-shadow:inset #333 1px 1px 2px;

表示例