IE6~ でもドロップシャドウ、角丸、透過とか書けちゃう『CSS3 PIE』がけっこう素敵でした。

Advertisement

超今さらなヤツらしいですけど、でもこれ、楽チンだなー。
※2013/2月現在、2.0betaも出ていました。
という事で、このサイトにも一部だけ実装してみました。
borderradius 微妙に見え方が違う・・・

使い方

  1. DLした「PIE.htc」というデータをサーバにアップ
  2. behavior: url("/PIE.htc"); を、指定したいCSSに記述
    ※htcファイルをアップした場所を指定して下さいね
div {
border-radius:3px;
box-shadow:1px 1px 1px #CCC;
behavior: url("/PIE.htc");
}
※色に関しては、#CCCCCC 等、16進数で指定して下さい。 black とか、カラーネームはダメらしい。

独自プレフィックスで透過もOK

-pie-background: rgba(100,100,100,0.5);
というように書けばRGBAの透過ができます。
ただ、ボックスの背景色など、一部に限るそう。

使ってみた感想

うーん・・・ちょっと重いような気もします。
* {behavior: url("/PIE.htc");}
と全部指定でもイケそうですが、重そうだし色々弊害ありそうな雰囲気。

詳しくは下記よりどうぞ 

公式サイト
CSS3 PIE: CSS3 decorations for IE

角丸だけなら

border-radius.htcというのがありますが、こっちはborder-radiusだけ版。
使い方は同様です。.htcをサーバにアップして
div {
border-radius:3px;
box-shadow:1px 1px 1px #CCC;
behavior:url(/border-radius.htc);
}
と書いておくだけ。

Curved corner (border-radius) cross browser

prefixfree.js とかと組み合わせると面白そうですね。