[JS]さまざまなエフェクトを持つ角丸を実装できるスクリプト -ShadedBorder

画像を使用しないで角丸を実装するスクリプトはたくさんありますが、このShadedBorderは角丸にさまざまな効果を与えて実装することができるスクリプトです。

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でのシンプルな角丸のサンプル

ShadedBorderで実装できる角丸は、四角や指定した一角のみにシンプルに角丸を実装だけでなく、シャドウ、グロウ、グラデーションなどのエフェクトやマウスホバー時のアクションなどさまざまなオプションを備えています。
ShadedBorder Examples

参考:
Nifty Corners: rounded corners without images

sponsors

top of page

©2024 coliss