色紙の角を折ったような背景を実装「jCorner」

当ページのリンクには広告が含まれています。

jQuery Plugin » テキスト » 色紙の角を折ったような背景を実装「jCorner」

色紙の角を折ったような背景を実装するプラグイン「jCorner」を紹介します。

jQueryプラグイン「jCorner」

このプラグインを使えば、色紙の角を折ったようなアクセントを DOM の背景にすることができます。

タイトルなどのテキストにアクセントをつけたい場合などに便利なプラグインです。

オプションでは、折り返しのサイズ・色などを設定することができます。

それではデモページをご覧ください。

「jCorner」のデモ

デモのソース（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>

jQueryプラグイン「jCorner」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）