[JS]さまざまなエフェクトを持つ角丸を実装できるスクリプト -ShadedBorder
Post on:2007年10月22日
sponsors
画像を使用しないで角丸を実装するスクリプトはたくさんありますが、このShadedBorderは角丸にさまざまな効果を与えて実装することができるスクリプトです。
ShadedBorder - JavaScript Round Corners with Drop Shadow
ShadedBorderの実装は、ダウンロードした「shadedborder.js」を外部ファイルとして指定し、下記のようなコードでシンプルな角丸が実装できます。
head箇所
<script type="text/javascript" src="shadedborder.js"></script>
<style type="text/css" media="screen">
#simple{padding:10px;}
</style>
body箇所
<div id="simple">
<p>角丸のサンプル</p>
</div>
<script language="javascript" type="text/javascript">
var sampleBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
sampleBorder.render('simple');
</script>
ShadedBorderで実装できる角丸は、四角や指定した一角のみにシンプルに角丸を実装だけでなく、シャドウ、グロウ、グラデーションなどのエフェクトやマウスホバー時のアクションなどさまざまなオプションを備えています。
ShadedBorder Examples
sponsors
