jquery.gradient.jsを使って画像を使わずにグラデーションを指定エリアに表示する方法をご紹介します。
Contents
ディスプレイ広告
jquery.gradient.jsを使ってグラデーションを表示するCSSの記述
※#idBoxはグラデーションを表示するエリアのCSSです。その他、必要に応じて変更して下さい。
<style type="text/css" media="all">
<!--
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>
jquery.gradient.jsを使ってグラデーションを表示するHTMLの記述
<h1>画像を使わずにグラデーションを表示</h1>
<div id="idBox"></div>
jquery.gradient:画像を使わずにグラデーションを表示するデモページ
jquery.gradient:画像を使わずにグラデーションを表示するデモページ
ソース元:グラデーションを作成する
CSSでも出来そうですね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。