jquery.gradient.jsを使って、画像を使わずにグラデーションを指定エリアに表示する方法をご紹介します。
Contents
画像を使わずにグラデーションを表示するCSSの記述
※#idBoxはグラデーションを表示するエリアのCSSです。その他、必要に応じて変更して下さい。
<!-- body{ margin: 0; padding: 0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:15px 0; } #idBox{ margin:0 auto; width:300px; height:300px; } --> </style>
jquery.gradient.jsを使って、画像を使わずにグラデーションを表示するJavaScriptの記述
※jquery.min.js、jquery.dimensions.js、jquery.gradient.jsファイルを読み込みます。$(グラデーション表示エリア).gradient({カラー、方向、長さ})でグラデーション表示エリアに対してオプション(カラー、方向、長さ等)を指定します。
<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:'FFFF66',to:'333333',direction:'horizontal',position:'top',length:300}); }); //--> </script>
画像を使わずにグラデーションを表示するHTMLの記述
<h1>画像を使わずにグラデーションを表示</h1> <div id="idBox"></div>
jquery.gradient:画像を使わずにグラデーションを表示するデモページ
jquery.gradient:画像を使わずにグラデーションを表示するデモページ
ソース元:グラデーションを作成する
ソース元:グラデーションを作成する
まぁ、CSSでも出来そうですね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告