空みたいな背景

サンプル

これは、ＩＥ独自のグラデーション効果を使ったものです。

サンプルは背景色だけですが、テキストがあれば当然テキストにも効果が出ます。

ソースをコピーしたら、いろいろ数値をかえて遊んでみましょう。

ではソースです。

<HTML>
<HEAD>
<TITLE>空みたいな背景</TITLE>

<SCRIPT LANGUAGE="JavaScript">
 var brName = navigator.appName.charAt(0)
 var w
 var h

 function myMove() {
     
      w = document.body.offsetWidth;　 //　ブラウザの幅をもとめます　
      h = document.body.offsetHeight;　//  ブラウザの高さをもとめます
 
      document.all.bg1.style.width = w;　 // bg1の幅をブラウザの幅と合わせます
      document.all.bg1.style.height = h;　// bg1の高さをあわせます    
      document.all.bg1.filters.alpha.finishY = h;　//効果の最後を高さいっぱいに設定します
      document.all.bg1.style.visibility = "visible";　//　ここではじめてbg1を表示します
  
        }
 
 function yuyake() {
          document.all.bg1.style.background = "#FF0000";
          document.all.bg1.filters.alpha.startY = h;
          document.all.bg1.filters.alpha.finishY = 0;
                            }
 
 function aozora() {
          document.all.bg1.style.background = "#0080ff";
          document.all.bg1.filters.alpha.startY = 0;
          document.all.bg1.filters.alpha.finishY = h;
                           }
                           
 //　あおぞらとゆうやけでは、効果を逆転してみました。
                           
</SCRIPT>

</HEAD>

<BODY TEXT="#000000" LINK="#8000FF" VLINK="#FF80FF" onLoad="myMove()">

<DIV ID="bg1" 
STYLE="visibility:hidden;position:absolute;left:0;top:0;background-color:#0080ff;

z-index:1;　　//　オブジェクトの重ね順です。数の小さいほうが下になります。

filter:alpha(opacity=70,finishOpacity=0,style=1,startX=0,startY=0,finishX=0,finishY=0">
//　グラデーション効果の設定です。
　　opacity        : はじめの透過率（０－１００）
    finishOpacity  : おわりの透過率（０－１００）
    startX,Y       : 効果をつけ始める座標
    finishX,Y　　　:　効果を終わる座標　　　　　//
    　
</DIV>

<DIV ID="main1" 
STYLE="visibility:true;position:absolute;left:10;top:10;z-index:2;width:80"
 onMouseover="aozora()">
あおぞら
</DIV>

<DIV ID="main2" 
STYLE="visibility:true;position:absolute;left:10;top:150;z-index:2;width:80"
 onMouseover="yuyake()">
ゆうやけ
</DIV>

</BODY>
</HTML>