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

2007/03/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>
shadow_box.jpg

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

このページを共有する