CSS3


たまにはWebっぽいことを・・・・
CSS3って何がそんなに変わったの?(今さらっ?!)


テキストやボックスに影がつく!


text-shadow:[X方向への距離*] [Y方向への距離*] [ぼかし] [影の色];
box-shadow:[X方向への距離*] [Y方向への距離*] [ぼかし] [影の色];
*:必須


対応ブラウザ:
text-shadow ・・・ FF3, FF4, GC2, GC3, GC4, GC5, GC6, S3, S4, S5, O10
box-shadow ・・・ IE9, FF4
(らしい。全ブラウザで確認した訳ではないです。。。ゴメンナサイ)


※,(カンマ)区切りで複数指定できます


text-shadow: 0px -1px #666666, 1px 0px #666666, 0px 1px #666666, -1px 0px #666666;
のように指定すると、境界もつけれます。


text-shadow




角丸が画像を使わずに実現!


border-radius:[左上] [右上] [右下] [左下];
それぞれ角丸の円半径のサイズを指定します。
楕円の場合は、水平方向を指定した後、スラッシュで垂直方向を指定するそう。


border-radius: 80px 25px 10px 30px / 20px 25px 60px 5px;


対応ブラウザ: IE9, FF4, GC3, GC4, GC5, GC6, S4, S5


サンプル
border-radius: 50px 10px 50px 10pxを指定してみた




グラデーションとかできるのもうれしいですね〜
他にもいっぱいあるけど、未勉強です。
使いたいのはいっぱいあっても、
だいたいお仕事では古いブラウザ対応ばっかりで
新しいのが出てきても実践の場ないですよね。。。