IE6/7/8のブラウザでも角丸やドロップシャドウが使えるCSS3


今日の画像(←)は借り物。
金子さんというデザイナーさんのブログなんですけど、イラストのタッチが好きです。

さて、標記のこと。ie-css3.htcというのをインクルードすると、不出来だけど可愛い(否、可愛くない)IEでも CSS3が使えちゃうよという技です。詳しいことはリンク先をご参照あれ。(詳しい順、参考になった順です)

  1. IEでもCSS3 その1(ie-css3)
  2. IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
  3. IE6/7/8のブラウザでも角丸やドロップシャドウが使えるCSS3

text-shadowが使いたかったので「CSS3 PIE」は検討外だったんですけど、角丸とかグラデーションはPIEの方がきれいみたいです。
 
ie-css.htc を使うときの注意点。

  • CSSに↓のように書くと、普通、CSSのあるフォルダのものを引っぱってくると思いますが、さうではありませんでした。ルートのを持ってくるみたいです。安全のため、フルパスで書いた方がいいです。
    behavior: url(ie-css3.htc);
    behavior: url('/wp-content/themes/hoge/style-vega/ie-css3.htc');
    
  • 『text-shadow: 1px 1px 2px #a0a0a0;』の指定の仕方にちょっと癖があります。シャドウの位置(XとY)はどれくらい離すかで、わかりやすいですが、ボケ具合のパラメータがちょっと難しいです。