Hatena::Groupweb

vantguarde

 | 

12.29

)

| 15:40

おおおおお。

ヘッダが主張しすぎな感じとかがちょっと飽きてきたので、ちょっとだけリニューアルした。

物事をシンプルにするます

かわいい!いつも好きです(?

さてさて。

FirefoxやOperaではちょっと変な感じになるので、-webkit-border-radiusのみにした。

たぶんFirefox (3.6)とOperaがパーセンテージの指定にちゃんと対応してないからでしょうね。ただ、別の理由でWebKitもそのうち「変な感じ」になるかもしれません。

というのもこれ、WebKitのborder-radiusの実装がちゃんとしてないから「変じゃない」んですよね。B&Bモジュールにはこういう定義があります。

when two adjoining borders are of different thicknesses the corner will show a smooth transition between the thicker and thinner borders.

Corner Shaping

隣接するborderのborder-widthが異なる場合、それがスムーズに繋がるように描画されるってことになります。Fig. 7, 8を見るとわかりやすいですかね。

というわけで

elem {
  border-bottom: 2px solid black;
  border-radius: 50%;
}

こう書くと、横に向かうに従い細くなるように描画されるはずです(横のborder-widthが0なので)。

ところがWebKitはここが全然できてなくて、スムーズなtransitionもなくぶった切ってくれちゃうんですよね。IEBlogの記事でも比較されていたりします(For a solid border of variable...のところ、右がWebKit)。

Firefox 4やIE9は見たところちゃんとしてる(細い月のようになる)ので、WebKitもこれにマッチすると、ちょっと見た目がよろしくなくなるかなあと。

いちおう、こう書いておけばFirefox 4, IE9, WebKitでだいたい同じになるはず。横に同じ太さのborderを置いて、色はtransparentに。幅広がっちゃいますが。

elem {
  border-style: none solid solid;
  border-width: 2px;
  border-color: transparent transparent black;
  border-radius: 50%;
}

ただ、角のborder-styleborder-colorのtransitionについてはIt is not defined what these transitions look like.と未定義なので、実装によっては変わるかも。なので完全ってわけではないです。たぶん大丈夫だと思いますが。

 | 
Contact: @vant / lepetitcroissant@gmail.com.