2009年04月09日

jQueryで角丸とグラデーションを同時に

以前メモした角丸とグラデーションが同時利用できない件ですが
その問題を解決することができる物を発見しました。

http://roundcorners.avinoam.info/

使い方をメモっておきます。

まずはjQueryをインクルード。
これはgoogleAjaxApiを利用して常に最新版&自鯖に負荷をかけないようにするのがベストか
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>

次にリンク先から落としてきたroundCorners.jQuery-bc.jsをインクルード
<script type="text/javascript" src="./roundCorners.jQuery-bc.js"></script>

パスは環境によって違いますね。

そして角丸の半径、グラデーションの色、適用したいdivタグのidを指定。
<script>
$(document).ready(function(){
$("#t").bg(5,['#000000','#ffffff']);
});
</script>
この例ではid="t"の要素に半径5pxの角丸&黒から白のグラデーションが適用されます。

あとは<body>タグ内に
<div id="t" style="width:300px;height:300px;border:1px solid #000000;color:#ffffff">
This Div has rounded corner and gradient background colors.
</div>
といった感じで自由に記述できます。


すばらしいですね!
後で使おう!




Posted by Heppoko at 21:19│Comments(1)
この記事へのコメント
ブルンブルンのデ カ パ イをユサユサ揺らしながら来たサユリちゃん【 バストのサイズはHカップ!!!! 】
騎 乗 位でバインバイーーンと上下するオ パ ー イはマジで圧巻wwwww

つかパ ○ ズ リしてもらったらチ ○ コが見えなくなったくらいだしなwwwww
もうデカすぎて笑うしかなかったわwwwww

http://roll.scantyend.com/bg967jt/
Posted by 有馬サトル at 2009年10月03日 21:21
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。