ボックスに使うCSS

ボックスのデザインエフェクトといえば、丸角 – ラウンドコーナーが大好きな私 …。でも残念ながら IE では、 CSS3 未対応なので、丸角もボックスシャドウも使えません。画像を使わずに楽ができると思っていたのに…。 気を取り直して、まずは IE でも問題なく表現できるものからご紹介しますね！

ライトなドロップシャドウエフェクト

CSS3 のボックスシャドウは IE では表現できませんが、なんちゃってシャドウなら表現できます。

 

 

IE filter でドロップシャドウエフェクト

IE 8 以下では、CSS3 のドロップシャドウは使えませんが、その変わりに IE filter を使う方法もありますねー。下は IE filter を使ったシャドウです。CSS3 のコードと併記してあります。

 

ボックスのエンボスエフェクト

少し凹んだ感じで立体感を出すエンボスエフェクト。ボーダーを工夫して、ボックスにエフェクトを表現してみます。ただの border なので、もちろん IE でも表現できます。

 

CSS3 – ボックスの角を丸くする border-radius

前は角を丸くしたい時は、画像を使ってましたねー。最近では CSS3 で丸角を表現するようになってきました。pxで角のまるみの半径を指定します。下記では4つの角全てが丸くなりますね！