Deutsch
<html> <head> <title>Windows Longhorn Glass Look</title> <style> body { Hintergrund: #667788; Schriftfamilie: Tahoma; Schriftgröße: 16px; Polsterung: 0; Rand: 0; Überlauf: versteckt; Hintergrund:#669900; } h1 { Schriftgröße: 140 %; } #window1 { top: 50px; links: 50px; Breite: 400px; Höhe: 300px; } #window2 { top: 270px; links: 250px; Breite: 400px; Höhe: 300px; } #window3 { top: 150px; links: 400px; Breite: 300px; Höhe: 300px; } #window4 { top: 200px; rechts: 100px; Breite: 400px; Höhe: 350px; } #window1 .border { border-color: #F8E0C0; } #window1 .glass { Hintergrund: #F8E0C0; } #window2 .border { border-color: #E0F8C0; } #window2 .glass { Hintergrund: #E0F8C0; } #window3 .border { border-color: #E0F0F8; } #window3 .glass { Hintergrund: #E0F0F8; } .window { Position: absolut; } .shadow { Position: absolut; oben: -2px; links: -2px; Breite: 100 %; Höhe: 100 %; Hintergrundfarbe: #4F7500; } .glass { Position: absolut; oben: 0px; links: 0px; Breite: 100 %; Höhe: 100 %; Hintergrundfarbe: #4F7500; } .border { Position: absolut; oben: 0px; links: 0px; Breite: 100 %; Höhe: 100 %; Rand: 1 Pixel fest #F0F0F0; Polsterung: 80px 10px 10p 10px; } .content { Höhe: 100 %; Breite: 100 %; Überlauf: automatisch; Hintergrund: weiß; Polsterung: 0,5em; Cursor: Standard; Filter: Alpha(Deckkraft=60); } .title { Farbe: weiß; Schriftstärke: fett; Schriftgröße: 20px; Position: absolut; oben: 0px; links: 0px; Breite: 100 %; Höhe: 80px; Polsterung: 25px 20px; Cursor: bewegen; } .current .shadow { top: 1px; links: 1px; } .current .content { filter: none; } .current .title { z-index: 1; } #menu { Position: absolut; Rand: 1 Pixel einfarbiges RGB (182, 184, 196); Polsterung: 1px 2px; Hintergrund: #f4f4f5; Schriftfamilie: Trebuchet ms; Schriftgröße: 9pt; } #menu a { display: block; Breite: 200px; Farbe: Schwarz; Textdekoration: keine; Höhe: 18px; Cursor: Standard; } #menu ai { display: block; schweben: links; Position:relativ; Höhe: 14px; Breite: 26px; Hintergrund: #ececed; Rand links: 1 Pixel fest #ffffff; border-right: 1px solid #e0e0e1; Rand links: -2px; Rand rechts: -3px; Polsterung: 2px 0px; } #menu a span { display: block; Position:relativ; Höhe: 14px; Hintergrund: #f4f4f5; Rand links: 1 Pixel fest #ffffff; border-right: 1px solid #ffffff; Polsterung: 2px 3px; Rand rechts: -2px; } .current #menu a:hover { border: 1px solid; Rahmenfarbe: rgb(158, 215, 240) #ffffff; Polsterung: 0px; } .current #menu a:hover i { border: 1px solid; Rahmenfarbe: #ececed #e0e0e1 #d8e0f0 rgb(158, 215, 240); Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2eaf2, endColorstr=#ffd8e0f0); Polsterung: 0px; Breite: 25px; } .current #menu a:hover span { border: 1px solid; Rahmenfarbe: #f4f4f5 rgb(158, 215, 240) #e8f2f8 #e8f2f8; Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeef2f8, endColorstr=#ffddedf8); Polsterung: 0px 3px; } </style> <script> var current = null; var Dragging = false; var gestartetDragging = false; function setCurrent(w) { if (w != current) { // alten Strom zurücksetzen if (current) current.className = 'window'; // Strom setzen current = w; current.className = 'aktuelles Fenster'; // Aktuelles an die Spitze setzen document.getElementById("windows").appendChild(current); } // init Drag var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); if (offsetY < 80) { dragging = true; dragEffect = function() { w.style.pixelLeft = event.x - offsetX; w.style.pixelTop = event.y - offsetY; } } else { var width = parseInt(w.currentStyle.width); var resizeX = offsetX > width - 10; var height = parseInt(w.currentStyle.height); var resizeY = offsetY > height - 10; if (resizeX || resizeY) { dragging = true; var offsetX = event.x - Breite; var offsetY = event.y - Höhe; 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 width = parseInt(w.currentStyle.width); var resizeX = offsetX > width - 10; var height = parseInt(w.currentStyle.height); var resizeY = offsetY > height - 10; w.style.cursor = (resizeX||resizeY)?(resizeY?"S"")+(resizeX?"E"")+"-resize": "default"; } var dragEffect; function moveCurrent() { if (!dragging || !current) return; if (event.button == 0) { releaseCurrent(); zurückkehren; } if (!startedDragging) { current.className = 'aktuelles Fenster ziehen'; gestartetDragging = true; } DragEffect(); } function releaseCurrent() { if (!current) return; current.className = 'aktuelles Fenster'; ziehen = false; gestartetDragging = false; } function 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>Diese Seite verwendet Keine Bilder, außer dem Hintergrundbild. Alles wird mit HTML, CSS, ein bisschen JavaScript und vielen Internet Explorer-Filtern erledigt.</p> <p>Ja, es ist langsam, aber hübsch, nicht wahr?</p> <p>Sieht schrecklich aus Jeder Browser außer 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">Blaues Fenster</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">Longhorn-Menü</div> <div class="glass"></div> <div class="border"> <div class="content" > <div id="menu"> <a href="#"><i></i><span>Menüpunkt 1</span></a> <a href="#"><i>< /i><span>Menüpunkt 2</span></a> <a href="#"><i></i><span>Menüpunkt 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">Grünes Fenster</div> <div class="glass"></div> <div class="border"> <div class="content"> </div> < /div> </div> </div> </body> </html>
