한국어
<html> <head> <title>Windows Longhorn Glass Look</title> <style> body { 배경: #667788; 글꼴 모음: tahoma; 글꼴 크기: 16px; 패딩: 0; 여백: 0; 오버플로: 숨김; 배경:#669900; } h1 { 글꼴 크기: 140%; } #window1 { 상단: 50px; 왼쪽: 50px; 너비: 400px; 높이: 300px; } #window2 { 상단: 270px; 왼쪽: 250px; 너비: 400px; 높이: 300px; } #window3 { 상단: 150px; 왼쪽: 400px; 너비: 300px; 높이: 300px; } #window4 { 상단: 200px; 오른쪽: 100px; 너비: 400px; 높이: 350px; } #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%; 테두리: 1px 솔리드 #F0F0F0; 패딩: 80px 10px 10p 10px; } .content { 높이: 100%; 너비: 100%; 오버플로: 자동; 배경: 흰색; 패딩: 0.5em; 커서: 기본값; 필터: 알파(불투명도=60); } .title { 색상: 흰색; 글꼴 두께: 굵게; 글꼴 크기: 20px; 위치: 절대; 상단: 0px; 왼쪽: 0px; 너비: 100%; 높이: 80px; 패딩: 25px 20px; 커서: 이동; } .current .shadow { 상단: 1px; 왼쪽: 1px; } .current .content { 필터: 없음; } .current .title { z-색인: 1; } #메뉴 { 위치: 절대; 테두리: 1px 솔리드 rgb(182, 184, 196); 패딩: 1px 2px; 배경: #f4f4f5; 글꼴 모음: trebuchet ms; 글꼴 크기: 9pt; } #메뉴 a { 디스플레이: 블록; 너비: 200px; 색상: 검정색; 텍스트 장식: 없음; 높이: 18px; 커서: 기본값; } #menu ai { 디스플레이: 블록; 플로트: 왼쪽; 위치:상대적; 높이: 14px; 너비: 26px; 배경: #ececed; 테두리 왼쪽: 1px 단색 #ffffff; 테두리 오른쪽: 1px 솔리드 #e0e0e1; 여백 왼쪽: -2px; 여백 오른쪽: -3px; 패딩: 2px 0px; } #메뉴 범위 { 디스플레이: 블록; 위치:상대적; 높이: 14px; 배경: #f4f4f5; 테두리 왼쪽: 1px 단색 #ffffff; 테두리 오른쪽: 1px 단색 #ffffff; 패딩: 2px 3px; 여백 오른쪽: -2px; } .current #menu a:hover { 테두리: 1px 솔리드; 테두리 색상: rgb(158, 215, 240) #ffffff; 패딩: 0px; } .current #menu a:hover i { border: 1px solid; 테두리 색상: #ececed #e0e0e1 #d8e0f0 rgb(158, 215, 240); 필터: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2eaf2, endColorstr=#ffd8e0f0); 패딩: 0px; 너비: 25px; } .current #menu a:hover 범위 { 테두리: 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 startDrging = 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 = event.y - parsInt(w.currentStyle.top); if (offsetY < 80) { 드래그 = 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 > 너비 - 10; var height = parsInt(w.currentStyle.height); var resizeY = offsetY > 높이 - 10; if (resizeX || resizeY) { 드래그 = true; var offsetX = event.x - 너비; var offsetY = event.y - 높이; 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 - parsInt(w.currentStyle.left); var offsetY = event.y - parsInt(w.currentStyle.top); var width = parsInt(w.currentStyle.width); var resizeX = offsetX > 너비 - 10; var height = parsInt(w.currentStyle.height); var resizeY = offsetY > 높이 - 10; w.style.cursor = (resizeX||resizeY)?(resizeY?"S":"")+(resizeX?"E":"")+"-resize":"default"; } var dragEffect; function moveCurrent() { if (!drag || !current) return; if (event.button == 0) { releaseCurrent(); 반품; } if (!startedDragged) { current.className = '현재 창 드래그'; 시작드래깅 = true; } 드래그Effect(); } function releaseCurrent() { if (!current) return; current.className = '현재 창'; 끌기 = 거짓; 시작드래깅 = 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>이 페이지에서는 다음을 사용합니다. 배경 이미지를 제외한 이미지가 없습니다. 모든 작업은 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">롱혼 메뉴</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>
