要素にグラデーションをかけるjavascript「Gradient」

背景などにグラデーションを使うサイトが増加しています。
しかし、グラデーションを使用する為に画像を作成しなければなりません。
Gradientは背景画像を使用せずにグラデーションをかけることができます。

使用方法

Gradientからjquery.gradient.jsをjQueryからjquery.jsとjquery.dimensions.jsをダウンロードします。

<script src="http://yourdomain/jquery.js" type="text/javascript"></script>

<script src="http://yourdomain/jquery.dimensions.js" type="text/javascript"></script>

<script src="http://yourdomain/jquery.gradient.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

  $('#id名').gradient();

});

</script>

以上を記述し、付与したid名を作成すれば完成です。
（＊大きい要素を指定すると表示に時間がかかります）
オプションには、rightcolor: '右の色（HEX）', leftcolor: '左の色（HEX）', opacity: 70（透明度）などがあります。

サンプル

水平方向

<script type="text/javascript">

$(function () {

  $('#id名').gradient({ rightcolor: '#00ff00', leftcolor: '#00ffff', opacity: 70});

});

</script>

垂直方向

<script type="text/javascript">

$(function () {

  $('#id名').gradient({ topcolor: '#ff5500', bottomcolor: '#ffffff', horizontal: false, opacity: 80});

});

</script>

Javascriptサンプルページ一覧

skuare.net