新デザインでCSS3を検証してみる
ブログデザインをリニューアル中。
CSS3で遊んでみたので、検証というほどでもないのですが、遭遇した現象をメモしておくと。
（なおIEでは、てんで見れません…笑）
綺麗に影を落とす
上部のナビゲーションのドロップダウン・メニューは、CSSだけのタイプですが、box-shadowを使うと、ドロップシャドウが簡単に、きれいにつきました。これはうまくいった。花まる。
box-shadowは影だけではない
shadowという名前なので、影をまず連想しますが、もちろん、白い色を使えば、光っているようにも魅せられる。
webkit-border-radiusで円形を作ったら、リンゴになった（Chrome）
円形なのですが、Chromeではリンゴみたいになった。なぜか、ちょっと気に入っています。
大きい角丸半径で円にしたのを、回転させるというのが、無理があるのかしら。
（あと、border-radiusは、四隅に別々にかけられるけど、MozillaとWebkitでは、ちょっと書式がちがうのが、注意点。）
box-shadow、border-radiusの解釈は、微妙にちがう
FFとChromeで、なんとなくちがいます。
「moz-transform: rotete 」回転で画像がギザつく（UbuntuのFF）
これはUbuntuのFirefoxでのみ起きた現象。Chromeでは大丈夫。
それと、コーナー角丸したやつを回転させたら、Firefoxでかすかに線がでます。
へこんだような区切り線
border と box-shadow を組み合わせて、光と影を使い、区切り線をへこんだように見せる。偶然、発見しました。
borderのleft/rightやtop/bottomの組み合わせでもできます。色の選び方がわりと難しい。
ボーダーのちがい
角丸に太めのボーダーをつけると。
FFでは非常にきれいな効果が出ますが、ChromeやSafariでは変な形に。こいつは残念。（それとも、まだ設定があるのかな？）
ゼロ射程からのtext-shadow
test-shadowというと、x軸y軸方向に1pxずつずらしてドロップダウンするのがよく使う手ですが、まったくずらさずに、大きめのぼかしをいれてやると、大きい文字のとき、かっこいい。ちょっと流行してるタイプ。
Windowsのどうしようもないフォントのギザつきを、多少は緩和できるのもポイント。
当然ながら、IE8ではダメ
…ですね。
他のブラウザの台頭によって、IEのシェアは減少中のようですが、IE９になって、CSS3にどのくらい対応するんだろう。時間がたつにつれ、さらにシェアが減っていきそうな予感も。
細かい話。
CSS３以外でも、IE８はちょっとずつ解釈に独自性があって、ヘッダーのRSSとツイッターのマークの配置は、別なものを用意した。ドロップダウン・メニューもかなりずれます。あと、ブロックのheightだけ書いてたらfloatが無視されたんで、widthと併記して対応。
Operaのことを忘れていた
そうか、Operaのことを忘れていた。10.50になっている。
CSS３、たいへんきれいに表示できてます。
FFがモジラの「-moz-」、ChromeやSafariが「-webkit-」であるように、Operaは「-o-」。
でも、border-radius、box-shadowは接頭辞なしでも機能しました。-o-transformは必要。なぜだ。
…CSS３の技はまだまだあるので、徐々に試していきます。