角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」

サイトを作っていると角が四角いレイアウトが多くなり、角ばった印象を与えます。
そこで角をとる「角丸」が多く使用されますが、今回はそんな角丸をJavaScriptで簡単に実現します。
jQuery Cornersは流行のUJavaScriptライブラリ「jQuery」のプラグインです。
角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」サンプル

使用方法
jQuery Cornersからjquery.corners.jsを、jQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.corners.min.js"></script>
<script>
$(document).ready( function(){
$('角丸の要素').corners();
});
</script>
上記を記述したらあとは指定した要素を書き込めば完了です。
<div class="要素名">
角丸です
</div>
オプションで、角丸の大きさや、下だけ右だけなどの指定が可能です。
角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」サンプル

sponsors

「角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」」をシェアする

記事作成:
記事URL:

TOP > > > 角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」