jquery.gradient：画像を使わずにグラデーションを表示してみる

画像を使わずにグラデーションを指定エリアに表示してみます。

1．CSSの記述例

以下はグラデーションを表示するエリアのCSSです。

<style type="text/css" media="all">
#idBox{
	margin:0 auto;
	width:300px;
	height:300px;
}
</style>

2．読込むJsとJavaScriptの記述例

<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:'bb4433',to:'aaaccc',direction:'horizontal',position:'top',length:300});
});
//-->
</script>

3．HTMLの記述例

<div id="idBox"></div>

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

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

まぁ、CSSでも出来そうですね。