30
Sep
Sep
jQueryプラグインでアンチエイリアスな角丸を作る
[ javascript : jQuery : webデザイン : xoops ]
角丸をつかったWEBページのデザインは、見た目の印象を柔らかくできたりするので、使いたいケースが結構あるのですが、テキストの量や画像の大きさ等に合わせて、サイズが可変してもきれいに見えるように、するとHTMLが複雑化してしまい制作、メンテナンスが煩雑になりがちです。ところが、jQueryとプラグインを使って可変する角丸が実装できると、画像ファイルも使わないので、動的ページのHTMLなどがかなり簡素化されるのがうれしいところです。
JQuery Curvy Corners
背景に画像を指定する事ができます。ただ外部のCSSに記述するとなぜか、動作しませんので、利用する時は、直接記述するか、head内に記述する必要があるようです。
デモページ >>ブログのページ >>
jQuery Corners 0.2
Rのサイズを指定できるのと、エイリアスを使う、使わないの指定も可能。透過しているので、背景画像があってもきれいにきまります。
JQuery Corner Gallery
記述の方法でさまざなRを表現できるので、かなり便利。角のRの大きさとか■してみたりといろんな方法があるのですが、safari でみると、その欠けている角がすべて黒く表示されてしまうようです。firefoxとIEではきれいにエイリアスがかかっているのですけど。。
※コードもシンプルでいいのですが、safariだと、角丸の背景が黒になってしまうようです。safariを無視していいようなサイトの場合はありかもです。
コメントする