[JS]角丸を簡単な記述で実装するスクリプト -Roundcorners Canvas
Post on:2008年3月10日
sponsors
Roundcorners Canvasは、タブ・ボタン・テーブルなどの矩形に、簡単な記述で角丸を実装できるスクリプトです。
上記のキャプチャ画像のように、divの矩形(赤の箇所)と、リストのタブ(Lookの箇所)を角丸にするには、下記のコードを使用します。
|
1 2 3 4 5 6 |
<textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { $("#mainblock").corner("30px"); $("#menu ul li").corner("8px top"); }); </textarea> |
Roundcorners Canvasは、ほかにも多様な角丸を実装することができます。
1pxの角丸のサンプル
border colorのサンプル
背景色のサンプル
背景画像のサンプル
ネストされたdivのサンプル
lineのサンプル
四辺で異なる角丸のサンプル
tableのサンプル
インライン要素のサンプル
エフェクトのサンプル
Roundcorners CanvasはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors
