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="http://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:画像を使わずにグラデーションを表示するデモページ

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

でも結局何だかんだで画像で済ましてしまいそうです。。。