Português
<html> <head> <title>Aparência de vidro Longhorn do Windows</title> <style> body { background: #667788; família de fontes: tahoma; tamanho da fonte: 16px; preenchimento: 0; margem: 0; estouro: oculto; plano de fundo:#669900; } h1 { tamanho da fonte: 140%; } #window1 { topo: 50px; esquerda: 50px; largura: 400px; altura: 300px; } #window2 { topo: 270px; esquerda: 250px; largura: 400px; altura: 300px; } #window3 { topo: 150px; esquerda: 400px; largura: 300px; altura: 300px; } #window4 { topo: 200px; direita: 100px; largura: 400px; altura: 350px; } #window1 .border { cor da borda: #F8E0C0; } #window1 .glass { background: #F8E0C0; } #window2 .border { cor da borda: #E0F8C0; } #window2 .glass { background: #E0F8C0; } #window3 .border { cor da borda: #E0F0F8; } #window3 .glass { background: #E0F0F8; } .window {posição: absoluto; } .shadow {posição: absoluto; superior: -2px; esquerda: -2px; largura: 100%; altura: 100%; cor de fundo: #4F7500; } .glass {posição: absoluto; topo: 0px; esquerda: 0px; largura: 100%; altura: 100%; cor de fundo: #4F7500; } .border {posição: absoluto; topo: 0px; esquerda: 0px; largura: 100%; altura: 100%; borda: 1px sólido #F0F0F0; preenchimento: 80px 10px 10p 10px; } .content { altura: 100%; largura: 100%; estouro: automático; fundo: branco; preenchimento: 0,5em; cursor: padrão; filtro: alfa(opacidade=60); } .title { cor: branco; peso da fonte: negrito; tamanho da fonte: 20px; posição: absoluta; topo: 0px; esquerda: 0px; largura: 100%; altura: 80px; preenchimento: 25px 20px; cursor: mover; } .atual .shadow { topo: 1px; esquerda: 1px; } .atual .content {filtro: nenhum; } .atual .title { índice z: 1; } #menu { posição: absoluto; borda: 1px RGB sólido (182, 184, 196); preenchimento: 1px 2px; plano de fundo: #f4f4f5; família de fontes: trebuchet ms; tamanho da fonte: 9pt; } #menu a { display: bloco; largura: 200px; cor: preto; decoração de texto: nenhuma; altura: 18px; cursor: padrão; } #menu ai { display: bloco; flutuar: esquerda; posição:relativo; altura: 14px; largura: 26px; plano de fundo: #ececed; borda esquerda: 1px sólido #ffffff; borda direita: 1px sólido #e0e0e1; margem esquerda: -2px; margem direita: -3px; preenchimento: 2px 0px; } #menu a span { display: bloco; posição:relativo; altura: 14px; plano de fundo: #f4f4f5; borda esquerda: 1px sólido #ffffff; borda direita: 1px sólido #ffffff; preenchimento: 2px 3px; margem direita: -2px; } .current #menu a:hover { borda: 1px sólido; cor da borda: rgb(158, 215, 240) #ffffff; preenchimento: 0px; } .atual #menu a:hover i { borda: 1px sólido; cor da borda: #ececed #e0e0e1 #d8e0f0 rgb(158, 215, 240); filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2eaf2, endColorstr=#ffd8e0f0); preenchimento: 0px; largura: 25px; } .current #menu a:hover span { borda: 1px sólido; cor da borda: #f4f4f5 rgb(158, 215, 240) #e8f2f8 #e8f2f8; filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeef2f8, endColorstr=#ffddedf8); preenchimento: 0px 3px; } </style> <script> var atual = null; var arrastando = false; var startDragging = false; function setCurrent(w) { if (w != current) { // desativa a corrente antiga if (current) current.className = 'window'; // define a corrente atual = w; current.className = 'janela atual'; // coloca o atual no topo document.getElementById("windows").appendChild(current); } // inicia o arrasto var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); if (offsetY <80) {arrastando = true; dragEffect = function() { w.style.pixelLeft = event.x - offsetX; w.style.pixelTop = evento.y - deslocamentoY; } } else { var largura = parseInt(w.currentStyle.width); var resizeX = offsetX > largura - 10; var altura = parseInt(w.currentStyle.height); var resizeY = offsetY > altura - 10; if (resizeX || resizeY) {arrastando = true; var offsetX = event.x - largura; var offsetY = event.y - altura; dragEffect = function() { if (resizeX) w.style.pixelWidth = event.x - offsetX; if (resizeY) w.style.pixelHeight = event.y - offsetY; } } } } function calcResize(w) { var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); var largura = parseInt(w.currentStyle.width); var resizeX = offsetX > largura - 10; var altura = parseInt(w.currentStyle.height); var resizeY = offsetY > altura - 10; w.style.cursor = (resizeX||resizeY)?(resizeY?"S":"")+(resizeX?"E":"")+"-resize":"default"; } var dragEffect; function moveCurrent() { if (!arrastando || !atual) return; if (event.button == 0) { releaseCurrent(); retornar; } if (!startedDragging) { current.className = 'arrastando a janela atual'; começou a arrastar = true; } arrastarEfeito(); } function releaseCurrent() { if (!current) return; current.className = 'janela atual'; arrastando = falso; começou a arrastar = false; } function makeUnselectable(e) { e.unselectable=true; if (e.className == 'conteúdo') 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>Aparência de vidro Windows Longhorn</h1> <p>Esta página usa nenhuma imagem, exceto a imagem de fundo. Tudo é feito com HTML, CSS, um pouco de JavaScript e muitos filtros do Internet Explorer.</p> <p>Sim, é lento, mas é lindo, não é?</p> <p>Parece horrível em qualquer navegador, exceto o 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">Janela Azul</div> <div class="glass"></div> <div class="border"> <div class ="content"> bbbbbbbb </div> </div> </div> <div class="window" id="window4" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div class ="shadow"></div> <div class="title">Menu Longhorn</div> <div class="glass"></div> <div class="border"> <div class="content" > <div id="menu"> <a href="#"><i></i><span>Item 1 do menu</span></a> <a href="#"><i>< /i><span>Item de menu 2</span></a> <a href="#"><i></i><span>Item de menu 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">Janela Verde</div> <div class="glass"></div> <div class="border"> <div class="content"> </div> < /div> </div> </div> </body> </html>
