Skip to content

Instantly share code, notes, and snippets.

@srsgores
Forked from anonymous/dabblet.css
Created April 29, 2013 02:49
Show Gist options
  • Save srsgores/5479442 to your computer and use it in GitHub Desktop.
Save srsgores/5479442 to your computer and use it in GitHub Desktop.
CSS3 Windows 8 Window
/**
* CSS3 Windows 8 Window
*/
.window {
padding: 0.2em;
border: 1px solid blue;
}
.window .app-icon, .window .program-status {
display: inline-block;
}
.window .toolbar {
text-align: right;
margin: 0;
}
.window.windows-8 {
border: 1px solid rgb(33, 114, 117);
padding: 0.4em;
position: absolute;
top: 50%;
background: rgba(69, 132, 148, 0.81);
resize: both;
overflow: auto;
}
.window.windows-8 header {
cursor: move;
text-shadow: none;
}
.window.windows-8 .program-status {
text-align:center;
text-overflow: ellipsis;
overflow: hidden;
width:69%;
white-space: nowrap;
}
.window.windows-8 .toolbar .btn {
padding: 0.3em 1em;
background-image: none;
text-shadow: 0 0 1px #000;
background: rgba(24, 24, 24, 0.05);
font-size: 12px;
color: #CCC;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.window.windows-8 .toolbar button[title="Close"]:hover {
background: rgb(255, 0, 0);
box-shadow: inset 0 0 0.6em #FFF;
color: #FFF;
}
.window.windows-8 .toolbar button:hover {
background: rgba(190, 190, 190, 0.47);
color: #FFF;
box-shadow: inset 0 0 2em rgba(0, 0, 0, 0.05);
}
.window.windows-8 .toolbar {
box-shadow: inset 0 -0.8em 0 1em #CCC;
}
.window.windows-8 .huge {
font-size: 14em;
text-shadow: 0 1px #000;
}
.window.windows-8 .btn-group>.btn+.btn {
margin-left: -1px;
}
.window.windows-8 section {
text-align:center;
border-radius: 0 !important;
box-shadow: inset 0 0 8em #000;
background: url("http://subtlepatterns.com/patterns/binding_dark.png");
border: none;
margin: 0;
}
<link rel= "stylesheet" href = "http://seangoresht.com/cache/template/gzip.php?template-fbf83c8c.css"/>
<script href = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="window windows-8">
<header>
<div class = "app-icon"><i class = "icon-windows"></i></div>
<div class="program-status">
Application - Windows 8 Buttons and App
</div>
<div class="btn-group toolbar">
<button class = "btn" title="Minimize"><i class = "icon-minus-2"></i></button>
<button class = "btn" title="Maximize"><i class = "icon-window-4"></i></button>
<button class = "btn" title="Close"><i class = "icon-close"></i></button>
</div>
</header>
<article id="content" role="main">
<section class="box">
<i class="icon-windows huge"></i>
</section>
</article>
</div>
</body>
function($) {
$.fn.drags = function(opt) {
opt = $.extend({handle:"",cursor:"move"}, opt);
if(opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
if(opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$drag.css('z-index', 1000).parents().on("mousemove", function(e) {
$('.draggable').offset({
top:e.pageY + pos_y - drg_h,
left:e.pageX + pos_x - drg_w
}).on("mouseup", function() {
$(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if(opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);
$(".window").drags();
{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment