Русский
<html> <head> <title>Windows Longhorn Glass Look</title> <style> body { background: #667788; семейство шрифтов: tahoma; размер шрифта: 16 пикселей; заполнение: 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 { border-color: #F8E0C0; } #window1 .glass {background: #F8E0C0; } #window2 .border { border-color: #E0F8C0; } #window2 .glass {background: #E0F8C0; } #window3 .border { border-color: #E0F0F8; } #window3 .glass {background: #E0F0F8; } .window { позиция: абсолютная; } .shadow { позиция: абсолютная; верх: -2px; слева: -2 пикселей; ширина: 100%; высота: 100%; цвет фона: #4F7500; } .glass { позиция: абсолютная; верх: 0 пикселей; слева: 0 пикселей; ширина: 100%; высота: 100%; цвет фона: #4F7500; } .border { позиция: абсолютная; верх: 0 пикселей; слева: 0 пикселей; ширина: 100%; высота: 100%; граница: сплошная 1 пиксель #F0F0F0; отступы: 80 пикселей 10 пикселей 10 пикселей 10 пикселей; } .content { высота: 100%; ширина: 100%; переполнение: авто; фон: белый; отступ: 0,5em; курсор: по умолчанию; фильтр: альфа (непрозрачность = 60); } .title { цвет: белый; начертание шрифта: жирный; размер шрифта: 20 пикселей; позиция: абсолютная; верх: 0 пикселей; слева: 0 пикселей; ширина: 100%; высота: 80 пикселей; отступ: 25 пикселей 20 пикселей; курсор: двигаться; } .current .shadow { верх: 1px; слева: 1 пиксель; } .current .content { фильтр: нет; } .current .title { z-index: 1; } #menu {позиция: абсолютная; граница: 1 пиксель, сплошной RGB (182, 184, 196); отступ: 1px 2px; фон: #f4f4f5; семейство шрифтов: требушет мс; размер шрифта: 9pt; } #menu a { display: block; ширина: 200 пикселей; цвет: черный; текстовое оформление: нет; высота: 18 пикселей; курсор: по умолчанию; } #menu ai { display: block; плавать: влево; положение: родственник; высота: 14 пикселей; ширина: 26 пикселей; фон: #ececed; левая граница: 1 пиксель сплошной #ffffff; правая граница: 1 пиксель сплошной #e0e0e1; поле слева: -2px; поле справа: -3px; отступ: 2 пикселя 0 пикселей; } #menu a span { display:block; положение: родственник; высота: 14 пикселей; фон: #f4f4f5; левая граница: 1 пиксель сплошной #ffffff; правая граница: 1 пиксель сплошной #ffffff; отступ: 2 пикселя 3 пикселя; поле справа: -2px; } .current #menu a:hover { border: 1px Solid; цвет границы: rgb(158, 215, 240) #ffffff; отступ: 0 пикселей; } .current #menu a:hover i { border: 1px Solid; цвет границы: #ececed #e0e0e1 #d8e0f0 rgb(158, 215, 240); фильтр: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2eaf2, endColorstr=#ffd8e0f0); отступ: 0 пикселей; ширина: 25 пикселей; } .current #menu a:hover span { border: 1px Solid; цвет границы: #f4f4f5 rgb(158, 215, 240) #e8f2f8 #e8f2f8; фильтр: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeef2f8, endColorstr=#ffddedf8); отступ: 0 пикселей 3 пикселя; } </style> <script> var current = null; вар перетаскивание = ложь; вар началDragged = ложь; function setCurrent(w) { if (w != current) { // сбрасываем старый текущий if (current) current.className = 'window'; // устанавливаем текущий current = w; current.className = 'текущее окно'; // помещаем текущий вверху document.getElementById("windows").appendChild(current); } // инициализация перетаскивания var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); если (offsetY <80) {перетаскивание = true; dragEffect = function() { w.style.pixelLeft = event.x - offsetX; w.style.pixelTop = event.y - offsetY; } } Еще {вар ширина = parseInt(w.currentStyle.width); вар resizeX = offsetX > ширина - 10; var height = parseInt(w.currentStyle.height); var resizeY = offsetY > высота - 10; если (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; } } } } functioncalcResize(w) { var offsetX = event.x - parseInt(w.currentStyle.left); var offsetY = event.y - parseInt(w.currentStyle.top); ширина вар = parseInt(w.currentStyle.width); var resizeX = offsetX > ширина - 10; var height = parseInt(w.currentStyle.height); var resizeY = offsetY > высота - 10; w.style.cursor = (resizeX||resizeY)?(resizeY?"S":"")+(resizeX?"E":"")+"-resize":"default"; } Вар dragEffect; function moveCurrent() { if (!перетаскивание || !current) return; если (event.button == 0) { ReleaseCurrent(); возвращаться; } if (!startedDragged) { current.className = 'перетаскивание текущего окна'; Начатое перетаскивание = правда; } Перетаскивание(); } function ReleaseCurrent() { if (!current) return; current.className = 'текущее окно'; перетаскивание = ложь; Начатое перетаскивание = ложь; } 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 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</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>
