jquery.gradient.jsを使ってグラデーションを表示する方法

jquery.gradient.jsを使って画像を使わずにグラデーションを指定エリアに表示する方法をご紹介します。

jquery.gradient.jsを使ってグラデーションを表示するCSSの記述

※#idBoxはグラデーションを表示するエリアのCSSです。その他、必要に応じて変更して下さい。

<style type="text/css" media="all">
<!--
body{
	margin: 0;
	padding: 0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:15px 0;
}
#idBox{
	margin:0 auto;
	width:300px;
	height:300px;
}
-->
</style>

jquery.gradient.jsを使ってグラデーションを表示するJavaScriptの記述

※jquery.min.js、jquery.dimensions.js、jquery.gradient.jsファイルを読み込みます。$(グラデーション表示エリア).gradient({カラー、方向、長さ})でグラデーション表示エリアに対してオプション（カラー、方向、長さ等）を指定します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.gradient.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
    $('#idBox').gradient({from:'FFFF66',to:'333333',direction:'horizontal',position:'top',length:300});
});
//-->
</script>

jquery.gradient.jsを使ってグラデーションを表示するHTMLの記述

<h1>画像を使わずにグラデーションを表示</h1>
    
<div id="idBox"></div>

jquery.gradient：画像を使わずにグラデーションを表示するデモページ

jquery.gradient：画像を使わずにグラデーションを表示するデモページ

ソース元：グラデーションを作成する

グラデーションを作成する

CSSでも出来そうですね。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。