jquery.gradient:画像を使わずにグラデーションを表示してみる
- 2019.06.29
- JavaScript jQuery
- 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でも出来そうですね。
-
前の記事
jquery.corner:指定エリアを角丸にするJs 2019.06.28
-
次の記事
超簡単にマウスオーバー画像を切り替える方法:this.src 2019.06.30