العربية
<html> <head> <title>مظهر Windows Longhorn Glass</title> <style> body { الخلفية: #667788; عائلة الخط: تاهوما؛ حجم الخط: 16 بكسل؛ الحشو: 0؛ الهامش: 0; الفائض: مخفي؛ الخلفية:#669900; } h1 { حجم الخط: 140%; } #window1 { أعلى: 50px؛ اليسار: 50 بكسل؛ العرض: 400 بكسل؛ الارتفاع: 300 بكسل؛ } #window2 { الأعلى: 270 بكسل؛ اليسار: 250 بكسل؛ العرض: 400 بكسل؛ الارتفاع: 300 بكسل؛ } #window3 { الأعلى: 150 بكسل؛ اليسار: 400 بكسل؛ العرض: 300 بكسل؛ الارتفاع: 300 بكسل؛ } #window4 { الأعلى: 200 بكسل؛ اليمين: 100 بكسل؛ العرض: 400 بكسل؛ الارتفاع: 350 بكسل؛ } #window1 .border { لون الحدود: #F8E0C0؛ } #window1 .glass { الخلفية: #F8E0C0؛ } #window2 .border { لون الحدود: #E0F8C0; } #window2 .glass { الخلفية: #E0F8C0؛ } #window3 .border { لون الحدود: #E0F0F8؛ } #window3 .glass { الخلفية: #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.5 م؛ المؤشر: افتراضي؛ عامل التصفية: ألفا (التعتيم = 60)؛ } .title { اللون: أبيض؛ وزن الخط: غامق؛ حجم الخط: 20 بكسل؛ الموقف: مطلق؛ أعلى: 0 بكسل؛ اليسار: 0 بكسل؛ العرض: 100%؛ الارتفاع: 80 بكسل؛ الحشو: 25 بكسل 20 بكسل؛ المؤشر: تحرك؛ } .current .shadow { top: 1px; اليسار: 1 بكسل؛ } .current .content { مرشح: لا شيء؛ } .current .title { z-index: 1; } #menu { الموضع: مطلق؛ الحدود: 1 بكسل RGB الصلبة (182، 184، 196)؛ الحشو: 1 بكسل 2 بكسل؛ الخلفية: #f4f4f5؛ عائلة الخط: trebuchet ms; حجم الخط: 9pt؛ } #menu a { العرض: كتلة؛ العرض: 200 بكسل؛ اللون: أسود؛ زخرفة النص: لا شيء؛ الارتفاع: 18 بكسل؛ المؤشر: افتراضي؛ } #menu ai { العرض: كتلة؛ تعويم: يسار؛ الموقف:نسبي؛ الارتفاع: 14 بكسل؛ العرض: 26 بكسل؛ الخلفية: #ececed؛ الحد الأيسر: 1 بكسل صلب #ffffff؛ الحدود اليمنى: 1 بكسل صلب #e0e0e1؛ الهامش الأيسر: -2 بكسل؛ الهامش الأيمن: -3 بكسل؛ الحشو: 2 بكسل 0 بكسل؛ } #menu aspan { العرض: كتلة؛ الموقف:نسبي؛ الارتفاع: 14 بكسل؛ الخلفية: #f4f4f5؛ الحد الأيسر: 1 بكسل صلب #ffffff؛ الحدود اليمنى: 1 بكسل صلب #ffffff؛ الحشو: 2 بكسل 3 بكسل؛ الهامش الأيمن: -2 بكسل؛ } .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:hoverspan { border: 1px Solid; لون الحدود: #f4f4f5 rgb(158, 215, 240) #e8f2f8 #e8f2f8; عامل التصفية: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeef2f8, endColorstr=#ffddedf8); الحشو: 0px 3px؛ } </style> <script> varcurrent = null; سحب فار = خطأ؛ var beginDraging = false; function setCurrent(w) { if (w!= current) { // إلغاء ضبط التيار القديم if (current) current.className = 'window'; // تعيين التيار الحالي = ث؛ current.className = 'النافذة الحالية'; // ضع التيار في الأعلى document.getElementById("windows").appendChild(current); } // السحب الحرفي var OffsetX = events.x - parseInt(w.currentStyle.left); var OffsetY = events.y - parseInt(w.currentStyle.top); إذا (إزاحة Y < 80) { السحب = صحيح؛ DragEffect = function() { w.style.pixelLeft = events.x - offsetX; w.style.pixelTop = events.y - offsetY; } } else { var width = parseInt(w.currentStyle.width); فار ريسيزكس = أوفستكس > العرض - 10؛ فار الارتفاع = parseInt(w.currentStyle.height); var resizeY = offsetY > height - 10; إذا (resizeX || resizeY) { السحب = صحيح؛ فار أوفستكس = حدث.x - العرض؛ فار إزاحة Y = حدث.y - الارتفاع؛ DragEffect = function() { if (resizeX) w.style.pixelWidth = events.x - offsetX; if (resizeY) w.style.pixelHeight = events.y - offsetY; } } } } function calcResize(w) { var offsetX = events.x - parseInt(w.currentStyle.left); var OffsetY = events.y - parseInt(w.currentStyle.top); var width = parseInt(w.currentStyle.width); فار ريسيزكس = أوفستكس > العرض - 10؛ فار الارتفاع = parseInt(w.currentStyle.height); var resizeY = offsetY > height - 10; w.style.cursor = (resizeX||resizeY)?(resizeY؟"S":")+(resizeX؟"E":")+"-resize":":default"; } فار DragEffect; دالة moveCurrent() { if (! Draging || !current) return; إذا (event.button == 0) { ReleaseCurrent(); يعود؛ } if (!startedDraging) { current.className = 'سحب النافذة الحالية'; startDraging = true; } DragEffect(); } function ReleaseCurrent() { if (!current) return; current.className = 'النافذة الحالية'; السحب = خطأ؛ startDraging = 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</h1> <p>تستخدم هذه الصفحة لا توجد صور، باستثناء صورة الخلفية. يتم كل شيء باستخدام HTML وCSS وقليل من JavaScript والكثير من مرشحات Internet Explorer.</p> <p>نعم، إنه بطيء، لكنه جميل أليس كذلك؟</p> <p>يبدو فظيعًا في أي متصفح باستثناء Internet Explorer.</p> <p> </p> <p align="right">سجورد فيشر، <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>
