画像を使わずにグラデーションを指定エリアに表示してみます。
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でも出来そうですね。