More Nifty Corners | Web Design | PRO.HTML.IT

Nifty Corners are a combination of CSS and Javascript to get rounded corners without images. The technique is made up of four essential parts:

「Javascriptで指定のHTML要素を動的に角丸デザインにする方法」で紹介したNiftyCornersですが、このページで紹介されている方法を使えば、アンチエイリアスな角丸を設定することが出来るようです。
使い方はちょっと変わって、

Rounded("div#nifty","all","#FFF","#D4DDFF","smooth");

のようになっています。
第二引数と第五引数が追加される形になっています。

第二引数では all が指定されていますが、これはどの角を角丸にするかの指定で、ヘッダだけを角丸にしたり、フッタだけを角丸にしたり、特定の角だけを角丸にすることが出来るようになっています。
all , top , bottom , tl , tr , bl , br が指定できます。このことにより、次のようなサンプルが作れます。スペース区切りで複数指定できるようです。

• サンプル

第五引数では、smoothにすることでアンチエイリアスがかかったデザインにすることが出来るみたいです。
smoothの他にborder,smallなどを指定できます。borderを指定することで、角丸枠に枠線をつけられます。スペース区切りで複数指定による組み合わせが可能のようです。

•  サンプル

さらに色指定の部分で、transparentを指定することで色を透明にして、次のような背景画像を使った角丸も実現できるみたいです。

• サンプル

パッケージのダウンロードはチュートリアル最後のページの最後あたりで可能となってます。

デザインにこだわると、やはりアンチエイリアスをかけたい場合がありますので、これは使えそうですね。

これまでの角丸記事：
 アンチエイリアスがかかったCSS角丸を作るWEBツール
 Javascriptで指定のHTML要素を動的に角丸デザインにする方法
 PHPで角丸枠（CSS）を簡単に作る方法