skuare.net

javascriptで要素にグラデーション「Dynamic Gradient Background」

背景色をグラデーションにするサイトが増えています。
ただし、作成した背景用画像がイメージと違うとまたいちから同じ手順を踏まなければならず面倒です。
Dynamic Gradient Backgroundを使用すると、手軽に要素の背景にグラデーションをかけられます。

使用方法
Dynamic Gradient Backgroundで使用しているscriptをコピーし、DynamicGradient.jsのように適当なファイル名で保存します。
<script src="http://yourdomain/DynamicGradient.js" type="text/javascript"></script>
<script type="text/javascript">
setGradient('id名','開始色（HEX）','終了色（HEX）',0);
</script>
最後の数字を帰ることで角度を変化させられます。
最後に上で指定したid名をグラデーションをかけたい要素に付与すれば完成です。
<div id="id名">
コンテンツ
</div>
javascriptで要素にグラデーション「Dynamic Gradient Background」サンプル

｜ ｜ ｜ ｜ ｜ ｜

前の記事：jQueryベースのグラフ作成javascript「Chart Plugin」
次の記事：iframeを一見Validに表示するjavascript「JQuery iFrame Plugin」

関連記事

• [jQuery]Colorize
• 画像にグラデーションをかけるjavascript「Transparent Gradients」
• 自由自在にグラデーションを付けるjavascript「jQuery gradient」
• 要素にグラデーションをかけるjavascript「Gradient」
• amazonライクにぐるぐる回るJavaScript「3D Image Carousel」