2012年9月3日月曜日

IE8以前で角丸を簡単にborder-radiusを使って実現するPIE.htc

border-radius_pie-htc今までは角丸のDesignは画像を使って表現していたけど、このLibraryを使えば他のCSS3対応Browserと同様にCSSだけで表現できる。

HTCはDynamic HTML (DHTML) Behaviorsと呼ばれるIE独自に実装された仕組み。中身はHTMLとJavaScript。IE全盛期の頃はTableのthをClickするだけで、昇順、降順に並び替えるhtcが流行った時期もある。詳しくは下記Siteで。

 

最近作ったteniteo.jpでも角丸部分はこのLibraryを使っている。

次のように絶対Pathとbackground-colorを指定しないと、うまいこと表示されなかった。

.corner {
    background: #fff;
    behavior: url(/wp-content/themes/hoge/_inc/PIE.htc);
}

画像を使わずborder-radiusとborder-colorで調整出来るので、とっても楽ちん。

コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives