Ricoで簡単角丸作成！『rico.js』

Ajaxの本を2冊買って、ちょっとどっぷりAjaxな感じなのでご紹介。

rico.jsを使って角丸を実装してみました。

なかなか綺麗な感じにできますね。ただしRicoで実装できるのは単色の角丸です。background-imageでチェックパターンなどもやってみましたが、上下が結局単色になるため、工夫したとしても難しそうですね。

あと角丸の度合いは2つのみ。大きいか（{compact:false}）小さいか（{compact:true}）ですね。
↑の例は大きい方の角丸です。

■HTMLは↓

<div class="rico_round"><p>Ricoで角丸を実現するのはとても簡単。<ol><li>prototype.jsとrico.jsを読み込む。</li><li>functionを作成する。</li><li>対象のタグにfunctionで指定したclassを設定する。</li></ol></p></div>

■CSSは↓

.rico_round {
width:260px;
background:#A0C8FF;
}
.rico_round p {
padding:10px 20px;
margin:0;
color:#333;
}

■headの中身は↓

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript"><!--
window.onload = function()
{
new Rico.Effect.Round("div","rico_round");
}
// --></script>

簡単ですね。headでprototype.jsとrico.jsを読み込んでfunctionを設定し、cssを作っておけば、あとは角丸にしたいdivにclass="rico_round"と設定するだけですね。

ちょくちょく使っていこうかな。