ドロップシャドウの効いた角丸ボックスを表現するjavascriptライブラリ

2007年3月26日

ドロップシャドウの効いた角丸ボックスを表現するjavascriptライブラリの記事を見つけたのでご紹介します。

ShadedBorder – JavaScript Round Corners with Drop Shadow

使い方はいたって簡単です。上記URLに記載のshadedborder.jsをダウンロードし解凍してからスクリプトを外部読み込みします。

<script type="text/javascript" src="shadedborder.js">

（X）HTMLは下記だと想定します。※classでsbは指定しておいてください。

<div id="round_me" class="sb">
<p>&nbsp;</p>
</div>

ボックスにCSSをつけます。

#round_me{
padding:20px;
width:30%;
margin:20px auto;
}
.sb-inner{　　　　　　/*ボックス内の背景色はここで指定*/
background:#FFF;
}
.sb-border{　　　　　/*ボックスのボーダー色はここで指定*/
background:#EEE;
}

角丸にする要素のIDの指定、コーナーのアール、ボーダーの太さ、シャドウの調整などはbody内にてjavascriptで記述します。

<script type="text/javascript">
　　border.render('round_me');
　　var border = RUZEE.ShadedBorder.create({ corner:5, shadow:10,  border:2 });
</script>

するとこんな感じでドロップシャドウ付きの角丸ボックスを作ることができます。尚、on-hoverの時はIE6では動かないそうですがIE7ではOKです。ライセンスはMITライセンス。