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