CSS3の追加機能

今日はCSS３のリッチな追加機能というのを試してみた。

【ボックスやテキストに影をつける】
box-shadow
text-shadow

【境界線を丸める】
border-radius

【背景をグラデーションにする】
background:gradient

そして仕様が確定するまではベンダープレフィックスを使う。

Firefox = -moz-
Webkit(Safari,Chrome) = -webkit-
Opera = -o-
InternetExplorer = -ms-

例えばボックスに影をつけたい場合は、

• moz-box-shadow: 1px 1px 5px #000000;
• webkit-box-shadow: 1px 1px 5px #000000;

そして将来プレフィックスなしで実装されたときのために
指定なしの

box-shadow: 1px 1px 5px #000000;

を書いておくといいみたい。

先のことを考えるのは大切だね。

以前までは、境界線を丸めるとか背景をグラデーションにするとか
めんどくさい作業だったらしい。
いつものことだけど、わたしはこれしか知らないのです。

ここから始まるのです。