今日の人気記事

  1. スライドアニメーション「Keep It Simple Stupid Animate」
  2. アニメーション効果ありのレスポンシブボックス「Box to Full Width」
  3. スタイリッシュなチェックボックス・ラジオボタンを実装(CSS不要)「ArtDesign Radio CheckBox」
  4. 入力フォームの数値に3桁ごとにカンマを付ける「maskMoney」
  5. フォームのInput要素にカラーアニメ効果「Formify」

色紙の角を折ったような背景を実装「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>
スポンサーリンク

関連記事(一部広告含む)