Español
<html> <head> <title>Apariencia de Windows Longhorn Glass</title> <estilo> cuerpo { fondo: #667788; familia de fuentes: tahoma; tamaño de fuente: 16px; relleno: 0; margen: 0; desbordamiento: oculto; antecedentes:#669900; } h1 { tamaño de fuente: 140%; } #ventana1 {arriba: 50px; izquierda: 50px; ancho: 400px; altura: 300 píxeles; } #ventana2 {arriba: 270px; izquierda: 250 px; ancho: 400px; altura: 300 píxeles; } # ventana3 { arriba: 150px; izquierda: 400px; ancho: 300px; altura: 300 píxeles; } #ventana4 {arriba: 200px; derecha: 100px; ancho: 400px; altura: 350 px; } #ventana1 .border { color del borde: #F8E0C0; } #ventana1 .glass { fondo: #F8E0C0; } #ventana2 .border { color del borde: #E0F8C0; } #ventana2 .glass { fondo: #E0F8C0; } #window3 .border { color-borde: #E0F0F8; } #window3 .glass { fondo: #E0F0F8; } .ventana { posición: absoluta; } .shadow { posición: absoluta; arriba: -2px; izquierda: -2px; ancho: 100%; altura: 100%; color de fondo: #4F7500; } .glass { posición: absoluta; arriba: 0px; izquierda: 0px; ancho: 100%; altura: 100%; color de fondo: #4F7500; } .border { posición: absoluta; arriba: 0px; izquierda: 0px; ancho: 100%; altura: 100%; borde: 1px sólido #F0F0F0; relleno: 80px 10px 10p 10px; } .content { altura: 100%; ancho: 100%; desbordamiento: automático; fondo: blanco; relleno: 0,5 em; cursor: predeterminado; filtro: alfa(opacidad=60); } .título { color: blanco; peso de fuente: negrita; tamaño de fuente: 20px; posición: absoluta; arriba: 0px; izquierda: 0px; ancho: 100%; altura: 80 píxeles; relleno: 25px 20px; cursor: mover; } .current .shadow { arriba: 1px; izquierda: 1px; } .current .content { filtro: ninguno; } .current .title { índice z: 1; } #menú { posición: absoluta; borde: 1px rgb sólido (182, 184, 196); relleno: 1px 2px; fondo: #f4f4f5; familia de fuentes: catapulta ms; tamaño de fuente: 9 puntos; } #menú a { mostrar: bloquear; ancho: 200px; color: negro; decoración de texto: ninguna; altura: 18px; cursor: predeterminado; } #menu ai { mostrar: bloquear; flotador: izquierda; posición: relativa; altura: 14px; ancho: 26px; antecedentes: #ececed; borde izquierdo: 1px sólido #ffffff; borde derecho: 1px sólido #e0e0e1; margen izquierdo: -2px; margen derecho: -3px; relleno: 2px 0px; } #menu a lapso { display: block; posición: relativa; altura: 14px; fondo: #f4f4f5; borde izquierdo: 1px sólido #ffffff; borde derecho: 1px sólido #ffffff; relleno: 2px 3px; margen derecho: -2px; } .current #menu a:hover { borde: 1px sólido; color del borde: rgb(158, 215, 240) #ffffff; relleno: 0px; } .current #menu a:hover i { borde: 1px sólido; color del borde: #ececed #e0e0e1 #d8e0f0 rgb(158, 215, 240); filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2eaf2, endColorstr=#ffd8e0f0); relleno: 0px; ancho: 25 píxeles; } .current #menu a:hover span { borde: 1px sólido; color del borde: #f4f4f5 rgb(158, 215, 240) #e8f2f8 #e8f2f8; filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeef2f8, endColorstr=#ffddedf8); relleno: 0px 3px; } </style> <script> var actual = nulo; var arrastrando = falso; var iniciadoArrastrando = false; function setCurrent(w) { if (w != current) { // desarmar la antigua corriente if (current) current.className = 'ventana'; // establece la corriente actual = w; current.className = 'ventana actual'; // poner actual en la parte superior document.getElementById("windows").appendChild(current); } // inicio de arrastre var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); if (offsetY < 80) { arrastrando = verdadero; dragEffect = function() { w.style.pixelLeft = event.x - offsetX; w.style.pixelTop = evento.y - offsetY; } } else { var ancho = parseInt(w.currentStyle.width); var resizeX = offsetX > ancho - 10; var altura = parseInt(w.currentStyle.height); var resizeY = offsetY > altura - 10; if (resizeX || resizeY) { arrastrando = verdadero; var offsetX = evento.x - ancho; var offsetY = evento.y - altura; dragEffect = function() { if (resizeX) w.style.pixelWidth = event.x - offsetX; if (resizeY) w.style.pixelHeight = event.y - offsetY; } } } } función calcResize(w) { var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); var ancho = parseInt(w.currentStyle.width); var resizeX = offsetX > ancho - 10; var altura = parseInt(w.currentStyle.height); var resizeY = offsetY > altura - 10; w.style.cursor = (resizeX||resizeY)?(resizeY?"S":"")+(resizeX?"E":"")+"-resize":"default"; } var arrastreEfecto; función moverActual() { if (!arrastrando || !actual) retorno; if (event.button == 0) { releaseCurrent(); devolver; } if (!startedDragging) { current.className = 'arrastrando la ventana actual'; iniciadoArrastrando = verdadero; } arrastrarEfecto(); } función liberarCurrent() { if (!current) retorno; current.className = 'ventana actual'; arrastrando = falso; iniciadoArrastrando = false; } función makeUnselectable(e) { e.unselectable=true; if (e.className == 'contenido') retorno; 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="ventana" id="ventana1" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div class="shadow"></div> <div class="title">w3future. es</div> <div class="glass"></div> <div class="border"> <div class="content"> <h1>Aspecto de Windows Longhorn Glass</h1> <p>Esta página utiliza sin imágenes, excepto la imagen de fondo. Todo se hace con HTML, CSS, un poco de JavaScript y muchos filtros de Internet Explorer.</p> <p>Sí, es lento, pero es bonito, ¿no?</p> <p>Se ve horrible en cualquier navegador excepto 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="ventana" id="ventana3" onmousedown="setCurrent(this)" onmousemove="calcResize(this)" > <div class="sombra"></div> <div class="title">Ventana azul</div> <div class="vidrio"></div> <div class="border"> <div clase ="content"> bbbbbbbb </div> </div> </div> <div class="window" id="window4" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div class ="shadow"></div> <div class="title">Menú Longhorn</div> <div class="glass"></div> <div class="border"> <div class="content" > <div id="menu"> <a href="#"><i></i><span>Elemento de menú 1</span></a> <a href="#"><i>< /i><span>Elemento de menú 2</span></a> <a href="#"><i></i><span>Elemento de menú 3</span></a> </div> </div> </div> </div> <div class="ventana" id="ventana2" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div class="shadow">< /div> <div class="title">Ventana verde</div> <div class="glass"></div> <div class="border"> <div class="content"> </div> < /div> </div> </div> </body> </html>
