Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2009-07-11

角丸 + ドロップシャドウ(border-radius + box-shadow)を IE に実装してみた

uuAltCSS.js に border-radius: と box-shadow: を実装してみました。IE6, IE7, IE8 で動きます。

f:id:uupaa:20090711043516j:image

これらは、IE8 + Silverlight3 のスクリーンショット

ガウスフィルタ(影のぼかし)が使えない環境もあります。

Silverlight3 がインストールされていない環境ではガウスフィルタが使えないので、簡略化した影を描画します。

f:id:uupaa:20090711124241j:image

左がガウスフィルタ適用(要Silverlight3 または Canvas で shadow が使えるブラウザ), 中が簡略化した影の描画(要Silverlight2以下 またはちょっと古いブラウザ), 右が簡略化した影の描画(要VML またはちょっと古いブラウザ)

IE 以外の古いブラウザでも動くんだよ(そのうちね)

とりあえず IE 向けに実装してましたが、canvas を叩いて描画してるので、Firefox2, Firefox3, Opera9.5 でも、border-radius: box-shadow: を使えるようにする予定です。