jQuery Corner を利用した角丸リキッドレイアウト

| | コメント(1) | トラックバック(0)

jQuery Corner を利用した角丸リキッドレイアウト

前回の jQuery Corner に関するエントリですが、ChromeとSafariで一部不具合がありました。すみません。

今回リベンジをかけて、下記のブラウザで使えるものを書きました。
Windows IE6~、FF3~、Opera9~、Chrome3~
Macintosh FF3~、Opera9~、Safari4~

サンプルを見る
div重ねなくて済むし、リキッドでいけます。

■解説
1) CSSで、Firefox向けに -moz-border-radius:14px; を指定します
2) CSSで、SafariとChrome向けに -webkit-border-radius:14px; を指定します
3) CSSだけだとIEとOperaが言うことを聞かないので jQuery-Corner を使う

■注意点
・paddingは角丸半径より大きいものを指定します
・残念ながらborderは実装しておりません

トラックバック(0)

このブログ記事を参照しているブログ一覧: jQuery Corner を利用した角丸リキッドレイアウト

このブログ記事に対するトラックバックURL: http://chocolatina.heteml.jp/mt/mt-tb.cgi/394

コメント(1)

リキッドレイアウトで角丸の方法をさがしておりました。
とても助かりました。ありがとうございました。

コメントする