色紙の角を折ったような背景を実装「jCorner」
当ページのリンクには広告が含まれています。
スポンサーリンク
色紙の角を折ったような背景を実装するプラグイン「jCorner」を紹介します。
jQueryプラグイン「jCorner」
このプラグインを使えば、色紙の角を折ったようなアクセントを DOM の背景にすることができます。
タイトルなどのテキストにアクセントをつけたい場合などに便利なプラグインです。
オプションでは、折り返しのサイズ・色などを設定することができます。
スポンサーリンク
それではデモページをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="jCorner のデモでーす。">
<title>jCorner - jQuery Plugin Demo</title>
<link href="kalendar.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jCorner.js"></script>
<script>
$(document).ready(function(){
$('.paper').jCorner({
background: '#ccc',
size: 25
});
});
</script>
<style>
.paper {
width: 80px;
margin-right: 10px;
padding: 20px;
float: left;
text-align: center;
position: relative;
}
.a {
background-color: #DE6641;
}
.b {
background-color: #E8AC51;
}
.c {
background-color: #F2E55C;
}
.d {
background-color: #39A869;
}
.e {
background-color: #4784BF;
}
.f {
background-color: #5D5099;
}
.g {
background-color: #A55B9A;
}
</style>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/jcorner/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>jCorner のデモ。</h1>
<div class="paper a">赤</div>
<div class="paper b">橙</div>
<div class="paper c">黄</div>
<div class="paper d">緑</div>
<div class="paper e">青</div>
<div class="paper f">藍</div>
<div class="paper g">紫</div>
</body>
</html>
スポンサーリンク