日本語
<html> <head> <title>Windows Longhorn Glass Look</title> <style> body {背景: #667788;フォントファミリー: タホマ;フォントサイズ: 16px;パディング: 0;マージン: 0;オーバーフロー: 非表示;背景:#669900; } h1 { フォントサイズ: 140%; } #window1 {トップ: 50ピクセル;左: 50ピクセル;幅: 400ピクセル;高さ: 300ピクセル; } #window2 {トップ: 270ピクセル;左: 250ピクセル;幅: 400ピクセル;高さ: 300ピクセル; } #window3 {トップ: 150ピクセル;左: 400ピクセル;幅: 300ピクセル;高さ: 300ピクセル; } #window4 {トップ: 200ピクセル;右: 100ピクセル。幅: 400ピクセル;高さ: 350ピクセル; #window1 .border { 境界線の色: #F8E0C0; #window1 .glass {背景: #F8E0C0; #window2 .border { 境界線の色: #E0F8C0; #window2 .glass {背景: #E0F8C0; #window3 .border { 境界線の色: #E0F0F8; #window3 .glass {背景: #E0F0F8; .window { 位置: 絶対; .shadow { 位置: 絶対;上: -2px;左: -2px;幅: 100%;高さ: 100%;背景色: #4F7500; .glass { 位置: 絶対;上: 0px;左: 0px;幅: 100%;高さ: 100%;背景色: #4F7500; .border { 位置: 絶対;上: 0px;左: 0px;幅: 100%;高さ: 100%;境界線: 1 ピクセルの実線 #F0F0F0;パディング: 80px 10px 10p 10px; .content { 高さ: 100%;幅: 100%;オーバーフロー: 自動;背景: 白;パディング: 0.5em;カーソル: デフォルト;フィルター: アルファ(不透明度=60); } .title { 色: 白;フォントの太さ: 太字;フォントサイズ: 20px;位置: 絶対;上: 0px;左: 0px;幅: 100%;高さ: 80ピクセル;パディング: 25 ピクセル 20 ピクセル;カーソル: 移動; .current .shadow { トップ: 1px;左: 1px; .current .content { フィルタ: なし; .current .title { z-index: 1; #menu {位置: 絶対;ボーダー: 1px ソリッド rgb(182, 184, 196);パディング: 1px 2px;背景: #f4f4f5;フォントファミリー: トレビュシェット ms;フォントサイズ: 9pt; #menu a {表示:ブロック;幅: 200ピクセル;色: 黒;テキスト装飾: なし。高さ: 18px;カーソル: デフォルト; #menu ai {表示:ブロック;フロート: 左;位置:相対;高さ: 14px;幅: 26px;背景: #ececed;ボーダー左: 1px ソリッド #ffffff;ボーダー右: 1px ソリッド #e0e0e1;マージン左: -2px;右マージン: -3px;パディング: 2px 0px; #menu スパン {表示:ブロック;位置:相対;高さ: 14px;背景: #f4f4f5;ボーダー左: 1px ソリッド #ffffff;ボーダー右: 1px ソリッド #ffffff;パディング: 2px 3px;マージン右: -2px; .current #menu a:hover { border: 1px ソリッド;境界線の色: rgb(158, 215, 240) #ffffff;パディング: 0px; } .current #menu a:hover i {ボーダー: 1px ソリッド;境界線の色: #ececed #e0e0e1 #d8e0f0 rgb(158, 215, 240);フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2eaf2, endColorstr=#ffd8e0f0);パディング: 0px;幅: 25px; .current #menu a:ホバースパン {ボーダー: 1px ソリッド;境界線の色: #f4f4f5 rgb(158, 215, 240) #e8f2f8 #e8f2f8;フィルター: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeef2f8, endColorstr=#ffddedf8);パディング: 0px 3px; </style> <script> var current = null; var ドラッグ = false; var startDragging = false; function setCurrent(w) { if (w != current) { // 古い現在の設定を解除 if (current) current.className = 'window'; // 現在の電流を設定します = w; current.className = '現在のウィンドウ'; // 現在を一番上に配置 document.getElementById("windows").appendChild(current); } // ドラッグの初期化 var offsetX =event.x - parseInt(w.currentStyle.left); var offsetY = events.y - parseInt(w.currentStyle.top); if (offsetY < 80) { ドラッグ = true; ragEffect = function() { w.style.pixelLeft =event.x - offsetX; w.style.pixelTop = イベント.y - オフセットY; else { var width = parseInt(w.currentStyle.width); varsizeX = offsetX > width - 10; var height = parseInt(w.currentStyle.height); varsizeY = offsetY > 高さ - 10; if (resizeX ||sizeY) { ドラッグ = true; var offsetX =event.x - 幅; var offsetY =event.y - 高さ; ragEffect = function() { if (resizeX) w.style.pixelWidth =event.x - offsetX; if (resizeY) w.style.pixelHeight =event.y - offsetY;関数 calcResize(w) { var offsetX =event.x - parseInt(w.currentStyle.left); var offsetY = events.y - parseInt(w.currentStyle.top); var width = parseInt(w.currentStyle.width); varsizeX = offsetX > width - 10; var height = parseInt(w.currentStyle.height); varsizeY = offsetY > 高さ - 10; w.style.cursor = (resizeX||resizeY)?(resizeY?"S":"")+(resizeX?"E":"")+"-resize":"default"; var ドラッグエフェクト; function moveCurrent() { if (!ドラッグ || !current) return; if (event.button == 0) { releaseCurrent();戻る; if (!startedDragging) { current.className = '現在のウィンドウをドラッグしています';開始されたドラッグ = true;ドラッグエフェクト();関数 releaseCurrent() { if (!current) return; current.className = '現在のウィンドウ';ドラッグ = false;開始されたドラッグ = false;関数 makeUnselectable(e) { e.unselectable=true; if (e.className == 'content') return; for (var c=e.firstChild;c;c=c.nextSibling) if (c.nodeType == 1) makeUnselectable(c); } </script> </head> <body onload="makeUnselectable(document.body);setCurrent(window1)" onmouseup="releaseCurrent()" onmousemove="moveCurrent()"> <div id="windows"> < div class="window" id="window1" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div class="shadow"></div> <div class="title">w3future。 com</div> <div class="glass"></div> <div class="border"> <div class="content"> <h1>Windows Longhorn Glass Look</h1> <p>このページでは、背景画像を除いて画像はありません。すべては HTML、CSS、少しの JavaScript、そして多くの Internet Explorer フィルターで行われます。</p> <p>はい、遅いですが、かなり綺麗ですよね?</p> <p>見た目はひどいです。 Internet Explorer 以外のブラウザ。</p> <p> </p> <p align="right">Sjoerd Visscher、<a href="http://w3future.com/weblog/">w3future.com </a>、2003 年</p> </div> </div> </div> <div class="window" id="window3" onmousedown="setCurrent(this)" onmousemove="calcResize(this)" > <div class="shadow"></div> <div class="title">ブルーウィンドウ</div> <div class="glass"></div> <div class="border"> <div クラス="content"> bbbbbbbb </div> </div> </div> <div class="window" id="window4" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div クラス="shadow"></div> <div class="title">Longhorn メニュー</div> <div class="glass"></div> <div class="border"> <div class="content" > <div id="menu"> <a href="#"><i></i><span>メニュー項目 1</span></a> <a href="#"><i>< /i><span>メニュー項目 2</span></a> <a href="#"><i></i><span>メニュー項目 3</span></a> </div> </div> </div> </div> <div class="window" id="window2" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div class="shadow">< /div> <div class="title">緑のウィンドウ</div> <div class="glass"></div> <div class="border"> <div class="content"> </div> < /div> </div> </div> </body> </html>
