CSS3で無限の挑戦を

• 「新しいCSS」ではなく、「便利な仕様が増えたCSS」
• 従来の記述と混在が可能です
• HTML5とセットではありません

CSS3って何だろう？

改めて説明する必要はないかもしれませんが、CSSとは、「スタイルシート」とも呼ばれ、ウェブページのデザインを定義するための言語のことです。
別の表現をするなら、「デザインを指示する命令」ともいえるかもしれませんが、
この最新の形式がCSS3です。
CSS3の特徴を簡単に言えば、従来のCSSに新しい要素を追加しているだけです。
その為、従来の記述はそのまま使えますので、それほど違いは感じられないかもしれません。
しかし色々面白い仕様や便利な仕様が追加されていますので、「使う・使わない」に関係なく追加仕様は一応チェックされることをおススメします。
なお、CSS3はホームページ制作の最新形式であるHTML5とセットで言及されることが多いですが、これは単に両方とも最新形式ですのでセットで使うことが多いというだけです。
HTML5でなければCSS3は適用されないということではなく、HTML5以前の形式で使用してもちゃんと適用されますので、気にせず使っていきましょう。

CSS3で何ができるのか？

CSS3で出来るようになったことは非常に多いです。
全てをご紹介することはとてもできませんので、特徴的なごく一部のものをご紹介します。

グラデーション

グラデーションは線形・円形・角度・方向・色数まで設定することができ、基本的なグラデーションは問題なく作ることができます。
また同時に背景画像や背景色を指定することもできます。

記述例

#grad{
background-image: -webkit-gradient（linear,lefttop,leftbottom,from(#333), to(#ccc));
background-image: -moz-linear-gradient(#333,#ccc);
background-image: linear-gradient(#333,#ccc);
}

テキストシャドウ

ボックスシャドウはテキストの外側に影を作ることができ、X軸・Y軸・ぼかし具合・色を設定することができます。
また、カンマ（,）で区切ることによって複数の影を作れます。

記述例

#Shadow{
text-shadow:-40px-10px0#f00,40px10px10px#00f;
}

角丸

CSS3ではボックスモデルに対して角を丸くする設定ができるようになりました。

記述例1:角丸

#radius{
border-radius:20px;
}

記述例2:円

#radius4{
width:100px;
height:100px;
border-radius:50%;
}

回転

CSS3ではtransformプロパティを使うことで要素の回転ができます。

記述例

#rotate{
background:url(bg3.jpg)no-repeat;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

傾斜

CSS3ではtransformプロパティを使うことで要素の傾斜を設定することができます。

記述例

#skew{
background:url(bg3.jpg)no-repeat;
-webkit-transform: skewX(10deg);
-moz-transform: skewX(10deg);
ransform: skewX(10deg);
}