HOME  >>>  HTML整理ノート  >>> DHTML -- 基本編   応用編

Gradientフィルタ (グラデーション効果)

Gradient

 

 

 

 

外枠の色を変更できます
  上部を 色に、下部を 色に


Gradientフィルタ(グラデーション効果)の書式

Sample Source......................................................................>>>

<script language="JavaScript">
<!--
function Start(c){
dv.filters.item('DXImageTransform.Microsoft.Gradient').startColorstr=c;
}
function End(c){
dv.filters.item('DXImageTransform.Microsoft.gradient').endColorstr=c;
}
// -->
</script>
</head>
<body>
<div id="dv" style="position:absolute; left:84px; top:38px; width:332px; height:109px;  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='black',endColorstr='yellowgreen')">  <span style="position:relative;left:40;top:30;width:250;color:red;   font:40 'Arial Black';text-align:center;   filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='white',endColorstr='blue')">   Gradient  </span> </div>
<form name="form1">外枠の色を変更できます
上部を
<select onchange="Start(this.value)">
<option value="black" selected>黒</option>
<option value="navy">紺</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄</option>
<option value="tomato">トマト</option>
<option value="pink">ピンク</option>
<option value="magenta">紫</option>
<option value="red">赤</option>
<option value="brown">ブラウン</option>
<option value="white">白</option>
</select>色に、
下部を
<select onchange="End(this.value)">
<option value="black" selected>黒</option>
<option value="navy">紺</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄</option>
<option value="tomato">トマト</option>
<option value="pink">ピンク</option>
<option value="magenta">紫</option>
<option value="red">赤</option>
<option value="brown">ブラウン</option>
<option value="white">白</option>
</select>色に
</form>

end(最終更新:12/11/9)