Français
<html> <head> <title>Aspect verre Windows Longhorn</title> <style> body { background: #667788; famille de polices : tahoma ; taille de police : 16 px ; remplissage : 0 ; marge : 0 ; débordement : caché ; arrière-plan : #669900 ; } h1 { taille de police : 140 % ; } #window1 { haut : 50px ; gauche : 50px ; largeur : 400 px ; hauteur : 300px ; } #window2 { haut : 270 px ; gauche : 250px ; largeur : 400 px ; hauteur : 300px ; } #window3 { haut : 150px ; gauche : 400px ; largeur : 300 px ; hauteur : 300px ; } #window4 { haut : 200 px ; à droite : 100 px ; largeur : 400 px ; hauteur : 350 px ; } #window1 .border { couleur-bordure : #F8E0C0; } #window1 .glass { arrière-plan : #F8E0C0; } #window2 .border { couleur-bordure : #E0F8C0; } #window2 .glass { arrière-plan : #E0F8C0; } #window3 .border { couleur-bordure : #E0F0F8; } #window3 .glass { arrière-plan : #E0F0F8; } .window { position : absolue ; } .shadow { position : absolue ; haut : -2px ; gauche : -2px ; largeur : 100 % ; hauteur : 100 % ; couleur d'arrière-plan : #4F7500 ; } .glass { position : absolue ; haut : 0px ; gauche : 0px ; largeur : 100 % ; hauteur : 100 % ; couleur d'arrière-plan : #4F7500 ; } .border { position : absolue ; haut : 0px ; gauche : 0px ; largeur : 100 % ; hauteur : 100 % ; bordure : 1px solide #F0F0F0 ; remplissage : 80px 10px 10p 10px ; } .content { hauteur : 100 % ; largeur : 100 % ; débordement : automatique ; fond : blanc ; rembourrage : 0,5em ; curseur : par défaut ; filtre : alpha (opacité = 60 ); } .title { couleur : blanc ; poids de la police : gras ; taille de police : 20 px ; position : absolue ; haut : 0px ; gauche : 0px ; largeur : 100 % ; hauteur : 80px ; remplissage : 25px 20px ; curseur : déplacer ; } .current .shadow { haut : 1px ; gauche : 1px ; } .current .content { filtre : aucun ; } .current .title { z-index : 1 ; } #menu { position : absolue ; bordure : 1px RVB solide (182, 184, 196) ; remplissage : 1px 2px ; arrière-plan : #f4f4f5 ; famille de polices : trébuchet ms ; taille de police : 9 pt ; } #menu a { display: block; largeur : 200 px ; couleur : noir ; décoration de texte : aucune ; hauteur : 18px ; curseur : par défaut ; } #menu ai { display: block; flotteur : gauche ; position : relative ; hauteur : 14px ; largeur : 26 px ; contexte : #écécé ; bordure gauche : 1px solide #ffffff ; bordure droite : 1px solide #e0e0e1 ; marge gauche : -2px ; marge droite : -3px ; remplissage : 2px 0px ; } #menu a span { display: block; position : relative ; hauteur : 14px ; arrière-plan : #f4f4f5 ; bordure gauche : 1px solide #ffffff ; bordure droite : 1px solide #ffffff ; remplissage : 2px 3px ; marge droite : -2px ; } .current #menu a:hover { border: 1px solid; couleur de la bordure : rgb(158, 215, 240) #ffffff ; remplissage : 0px ; } .current #menu a:hover i { border: 1px solid; couleur de la bordure : #ececed #e0e0e1 #d8e0f0 rgb(158, 215, 240) ; filtre : progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2eaf2, endColorstr=#ffd8e0f0); remplissage : 0px ; largeur : 25 px ; } .current #menu a:hover span { border: 1px solid; couleur de la bordure : #f4f4f5 rgb(158, 215, 240) #e8f2f8 #e8f2f8 ; filtre : progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffeef2f8, endColorstr=#ffddedf8); remplissage : 0px 3px ; } </style> <script> var courant = null; var glisser = false; var startDragging = false; function setCurrent(w) { if (w != current) { // désactive l'ancien courant if (current) current.className = 'window'; // définit le courant actuel = w ; current.className = 'fenêtre actuelle'; // met le courant en haut 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) { glisser = 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 > largeur - 10 ; var hauteur = parseInt(w.currentStyle.height); var resizeY = offsetY > hauteur - 10 ; if (resizeX || resizeY) { glisser = true ; var offsetX = event.x - largeur ; var offsetY = event.y - hauteur ; 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 > largeur - 10 ; var hauteur = parseInt(w.currentStyle.height); var resizeY = offsetY > hauteur - 10 ; w.style.cursor = (resizeX||resizeY)?(resizeY?"S":"")+(resizeX?"E":"")+"-resize":"default"; } var dragEffect; function moveCurrent() { if (!glisser || !current) return; if (event.button == 0) { releaseCurrent(); retour; } if (!startedDragging) { current.className = 'faire glisser la fenêtre actuelle'; démarréDragging = true ; } dragEffect(); } function releaseCurrent() { if (!current) return; current.className = 'fenêtre actuelle'; glisser = faux ; démarréDragging = 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>Cette page utilise pas d'images, sauf l'image d'arrière-plan. Tout est fait avec HTML, CSS, un peu de JavaScript et beaucoup de filtres Internet Explorer.</p> <p>Oui, c'est lent, mais c'est joli, n'est-ce pas ?</p> <p>Ça a l'air horrible dans n'importe quel navigateur sauf 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">Fenêtre bleue</div> <div class="glass"></div> <div class="border"> <div classe ="content"> bbbbbbbb </div> </div> </div> <div class="window" id="window4" onmousedown="setCurrent(this)" onmousemove="calcResize(this)"> <div classe ="shadow"></div> <div class="title">Menu Longhorn</div> <div class="glass"></div> <div class="border"> <div class="content" > <div id="menu"> <a href="#"><i></i><span>Élément de menu 1</span></a> <a href="#"><i>< /i><span>Élément de menu 2</span></a> <a href="#"><i></i><span>Élément de menu 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">Fenêtre verte</div> <div class="glass"></div> <div class="border"> <div class="content"> </div> < /div> </div> </div> </body> </html>
