Sin duda el mayor atractivo de Windows Vista, es su interface más elegante y trasparente llamada Aero. Para mi uno de los motivos por los que lo desinstalé, pesado e inutil, pero atractivo para los usuarios.
Softronic Window, es un port de este elegante diseño para nuestras páginas web. Para ello únicamente se ha usado CSS y para dotarlo de movimiento Javascript, esto nos permite seleccionar la forma que más nos interese sin tener que cargar más de lo que necesitamos.
Versión HTML + CSS
Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/softronic-window.css" />
<style type="text/css">
.softronic-window{top: 10px; bottom: 10px; left: 10px; right: 10px; width: auto; height: auto; min-width: 200px; min-height: 200px;}
</style>
</head>
<body>
<div class="softronic-window">
<div class="softronic-main-panel-background"></div>
<iframe class="softronic-main-panel" src="http://google.com" frameborder="0"></iframe>
<div class="softronic-top-left-edge"></div>
<div class="softronic-top-edge"><span>Title here</span></div>
<div class="softronic-top-right-edge"></div>
<div class="softronic-right-edge"></div>
<div class="softronic-left-edge"></div>
<div class="softronic-bottom-left-edge"></div>
<div class="softronic-bottom-edge"></div>
<div class="softronic-bottom-right-edge"></div>
</div>
</body>
</html>
[Demo]
Versión HTML + CSS Javascript
Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="css/softronic-window.css" /> <script src="javascripts/prototype.js" type="text/javascript"></script> <script src="javascripts/softronic-window.js" type="text/javascript"></script> </head> <body> <div class="softronic-window"><a href="softronic-windows.zip">Download file</a></div> <div class="softronic-window" style="top: 300px; left: 300px; width: 500px; height: 500px;"><iframe class="softronic-main-panel" frameborder="0" src="http://google.com"></iframe></div> </body> </html>
[Demo]
9 comentarios, 2 referencias
+
#