CSS3について

HTML5とともに話題になっているCSS3ですが、
前回、今回の課題で使用してみました。

意外に使えるという感触です。

正式勧告は2014年のようですが、
すでに主要なブラウザーでは対応している命令もあります。
このあたりの実装状況は各ブラウザーで異なります。

今回使用したのは、以下の命令です。
・text-shadow
・box-shadow
・border-radius
・rotate

text-shadowは、テキストに対して影をつけることができます。
box-shadowは、divでボックスを作成したものに対して、影をつけることができます。
border-radiusは、divでボックスを作成したものに対し、角を丸くすることができます。
(俗に言う角丸です)
例は、以下をご覧ください。
http://www.eno-moto.sakura.ne.jp/wordpress/portfolio/web/bbs/

rotateは、イメージ画像(img)に対し、角度をつけて表示させることができます。

CSS3を使用するに当たり、注意しなければならないことは、
正式勧告前のため、ブラウザーの実装状況が異なります。
ベンダープリフィックスと呼ばれるものをつけないと動作しないものもあるので、
注意が必要です。(-moz-,-o-,-ms-など)
ブラウザーのバージョンによっては記述方法も異なる命令もあります。

今までは画像化しないとできなかったことが、命令をひとつ書くことで、
実現できるようになったことは、大きな進歩だと思います。

従来のCSS2との組み合わせも可能で
たとえば、a:hover擬似要素とrotateとbox-shadowを組み合わせると
マウスをロールオーバーさせたときに画像を角度をつけた上で
影をつけるという演出をつけることも可能です。
(ブラウザーによっては動きません。IE9では、角度はつくのですが、
影がつかないという現象が起きています)


詳しい使い方については、以下を参照してください。
http://www.htmq.com/css3/index.shtml

ただ、上記のマニュアルは対応状況が古いところがありますので、
対応状況は別で調べる必要があります。
(rotateについては、IEは未対応になっていますが、IE9で対応しています)

今後、いろいろと使っていこうと思います。
皆さんもいかがですか?