Hatena::ブログ(Diary)

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

2009-07-12

角丸(border-radius:)をほぼ全てのブラウザに + ドロップシャドウ(box-shadow:)を一部のブラウザで使えるようにしてみた

今日も uuAltCSS.js をいじってました。

ハイ・チーズ

f:id:uupaa:20090712005514j:image

左から、Firefox2/3/3.5, Opera9.52/10β, Safari4, Google Chrome3, IE8 です。ブラウザ毎の縮小率がバラバラですね。

記念写真には写ってませんが、もちろん Opera9.27, IE6, IE7 でも動きます。

canvas で shadowColor が使えるブラウザ(Firefox3.5, Safari3+, Chrome1+) と IE6〜8 なら影も描画されます。

それ以外のブラウザでも、擬似的な影が表示されるように、これから処理を追加します。

そうそう、Firefox2 がね…

<style>
.base {
  margin: 2em; padding: 1em;
  border: 1em solid navy;
}
.boxshadow2 {
  box-shadow: blue 1em 1em 2em;
  -webkit-box-shadow: blue 1em 1em 2em;
  -moz-box-shadow: blue 1em 1em 2em;
  background-color: transparent;
}
.radius {
  color: gold; background: blue url(lena.jpg) repeat top left;
  border: 1.5em solid skyblue;
  border-radius: 5em;
  -webkit-border-radius: 5em;
  -moz-border-radius: 5em;
}
</style>

上記の CSS を食わせると Firefox2 は元々こういうレンダリングをします。

f:id:uupaa:20090712005515j:image

これ(↑) が、uuAltCSS.js を導入することで、こうなります(↓)

f:id:uupaa:20090712005516j:image

ちょっと余白が多いので、後でなんとかします。