Ricoで簡単角丸作成！『rico.js』
Ricoで角丸を実現するのはとても簡単。
- prototype.jsとrico.jsを読み込む。
- functionを作成する。
- 対象のタグにfunctionで指定したclassを設定する。
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"と設定するだけですね。
ちょくちょく使っていこうかな。
今日のCREAMU
無性にほしくなって2冊購入。
Ajaxライブラリリファレンスは見開きで1Ajaxが紹介されていてとても使いやすい。表紙と紙面のデザインもいいし、大きさも思ったより小さくてちょうどいい。かなり使い込めそうな本です。
まるごとの方もかなりかっこいい。
いろいろ使っていこうと思います！
| パーマリンク
