角丸ボーダーで悩む

角丸なデザインは見る分には嫌いではないんですが、コーディングとなると別問題で頭を悩ませる厄介なヤツだったりするわけです。
リキッドデザインのサイトで四方とも角丸を実現するには、画像をおのおのの四方にCSSでbackgroundにひくか、直接HTMLに書いてあげるんだけど、前者は<div>が入れ子になるか、空タグがいっぱになるし、後者はCSSを切ったときに角丸の画像が残ってしまうし。。
やっぱりjavascriptで実装するのが妥当だったりするのかなってことでいろいろなJSライブラリを探してみました。

1つ目Nifty Cubeは動作が軽いんだけどボーダーありの角丸ができず、んじゃtranscornersだっ!!と思ったら1pxのボーダーしか出せず :(
curvyCornersを使って実装しようとしたら、動作が重くて話にならないっ。。。

んで苦肉の策がNifty Cubeを使って無理やりボーダーを出す方法 :oops:
<div id=a"><div id="b">ここにコンテンツ</div></div>
内側の<div>にmarginを取ってやる方法。不要な<div>の入れ子はしたくはなかったけど、しかたないです。。
何かいい方法あったら誰か教えてください :cry:

よさげなまとめサイトがあったのでブックマーク :D
tech.nitoyon.com@hatena – JavaScript の角丸ライブラリまとめ
角丸に関するあれこれ | WWW WATCH

Trackback URI: http://blog.ochanocosaisai.com/wp-trackback.php?p=322

気軽に記事を評価してみて下さい。
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.50 out of 5)
Loading ... Loading ...

Yozik said,

2007/4/21 土曜日 @ 12:59:47

WWW WATCHのリンク先が違うYO!

Yozik said,

2007/4/21 土曜日 @ 13:01:42

RSSで飛んできたら去年の記事だった :( 失礼。

naoco said,

2007/4/21 土曜日 @ 19:40:19

んにゃー。指摘ありがとうございます。
修正しました :oops:

コメントする

RSS feed for comments on this post · TrackBack URI · add to hatena hatena.comment 0 user add to del.icio.us 1 users add to livedoor.clip 0 user