• RSS

[JS]IE8 以下で角丸を使えるjQuery プラグイン「jQuery curvyCorners」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

CSS3 の border-radius を使えば簡単に角丸を実現できますが、CSS3 が対応していないIE8 以下でも角丸を使えるようにするjQuery プラグインが「jQuery curvyCorners」です。

jQuery curvyCorners は要素の四隅の半径を個別に指定できるだけでなく、背景画像に対しても角丸を適用させることができますので、

個人的には、IE9 とその他のモダンブラウザにはCSS3 の border-radius で角丸を指定した上で、IE8 やIE7 でも角丸に対応しないといけない…という場合にだけjQuery curvyCorners を利用しています。

jQuery curvyCorners ダウンロード

以下のページより jQuery curvyCorners のファイルをダウンロードします。
※バージョンは、2013年現在で最新版である2.1.1 を利用します。


jQuery curvyCorners の設置

<head> 内にcurvycorners.src.js ファイルを設置します。
<!--[if lt IE 9]>
<script src="./curvycorners.src.js"></script>
<script>
curvyCorners.addEvent(window, 'load', initCorners);
function initCorners() {
    var settings = {
		tl: { radius: 10 },
		tr: { radius: 10 },
		bl: { radius: 10 },
		br: { radius: 10 },
		antiAlias: true
    }
    curvyCorners(settings, ".box");
}
</script>
<![endif]-->
この場合、box の要素に対して四隅に10px の角丸を適用させることになります。

続いてHTML、CSS ファイルの記述例はこんな感じです。
<style>
.box	{
	background:#dd0000;
	color:#fff;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.box p	{
	padding:20px 10px;
	text-align:center;
}
</style>

<div class="box"><p>角丸にします。</p></div>
jQuery curvyCorners はIE8 以下に適用させるようにしていますので、CSS ファイル内で.box 要素にも同じ半径だけ border-radius を指定しています。

以下のデモページで角丸を確認できます。
jQuery curvyCorners による基本的な角丸 のデモ


jQuery curvyCorners で個別の角丸処理

要素の四隅の角丸の大きさ(半径)は自由に変更できますので、
左上、右上のみ角丸を適用させたい」
という場合は、以下のように記述します。
<!--[if lt IE 9]>
<script src="./curvycorners.src.js"></script>
<script>
curvyCorners.addEvent(window, 'load', initCorners);
function initCorners() {
    var settings = {
		tl: {radius: 30 },
		tr: {radius: 30 },
		bl: false,
		br: false,
		antiAlias: true,
		autoPad: true,
    }
	curvyCorners(settings, ".box");
}
</script>
<![endif]-->
「tl」「tr」「bl」「br」など、各種オプションは以下の通りとなっています。
tl左上の半径
tr右上の半径
bl左下の半径
br右下の半径
antiAliasアンチエイリアス設定
autoPadパディング設定

角丸を指定する場所には {radius:半径} を記述し、角丸を指定しない場所は false にします。
※false にすることで正常に表示されない場合は、{radius: 0 } にします。
四隅に個別に角丸を適用させるデモ


背景画像に角丸処理

background-image で指定した背景画像にも角丸を適用できます。

背景画像の四隅に20px の角丸を適用させる場合は、以下のようなjavascript の記述をした上で、
<!--[if lt IE 9]>
<script src="./curvycorners.src.js"></script>
<script>
curvyCorners.addEvent(window, 'load', initCorners);
function initCorners() {
    var settings = {
		tl: { radius: 20 },
		tr: { radius: 20 },
		bl: { radius: 20 },
		br: { radius: 20 },
		antiAlias: true
    }
	curvyCorners(settings, ".box");
}
</script>
<![endif]-->

.box 要素の背景に画像を指定します。
<style>
.box		{
	background:url(./images.jpg) no-repeat top center;
	width:640px;
	height:480px;
	text-align:center;
	margin:0 auto;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
}
</style>

<div class="box"></div>

↓こんな感じで表示されます。
背景画像に角丸処理用させるデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください