YA OS X window in pure CSS

index.html

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="blurry"></div>
<div class="menu-bar">
  <i class="fa fa-apple"></i>
  <strong>Oobleck</strong>
  <span>File</span>
  <span>Edit</span>
  <span>View</span>
  <span>Window</span>
  <span>Help</span>
</div>
<article class="window-frame focus">
  <header class="top-bar">
    <div class="controls">
      <div class="control close"></div>
      <div class="control minify"></div>
      <div class="control expand"></div>
    </div>
    <div class="controls">
      <i class="fa fa-arrow-left"></i>
      <i class="fa fa-arrow-right disabled"></i>
      <i class="fa fa-rotate-right"></i>
      <i class="fa fa-home"></i>
    </div>
    <input class="address-bar" value="http://www.codepen.io/oobleck" />
  </header>
  <section class="window-content">
    <p>Guts go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, odio fugiat nisi eius debitis reiciendis, fuga voluptatum culpa corrupti facere tempore quo odit veritatis perspiciatis amet possimus dolore! Deleniti, officiis.</p>
  </section>
  <footer class="status-bar"></footer>
</article>

style.scss

@import "bourbon";
*, :before, :after { box-sizing: border-box; }
html {
  font: 300 16px/1.618 "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: 0.05em;
  user-select: none;
}
body {
  padding: 1em;
  font-size: 100%;
  color: #222;
  background: black url(http://nakedtruth.gr/wp-content/uploads/2014/12/usa2.jpg) 50% 50% no-repeat;
  background-size: cover;
}
.blurry {
  filter: saturate(1.5) blur(10px);
  background: inherit;
  background-size: cover;
  Xz-index: 1;
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  buttom: -10px;
  height: 100%;
}
.menu-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(white, 0.5);
  font-size: 0.9rem;
  padding: 0 1rem 0 0;
  line-height: 1.9;
  vertical-align: middle;
  
  .fa-apple {
    margin: 0 0.7em;
    padding: 0;
    font-size: 1rem;
  }
  > * {
    position: relative;
    padding: 0 0.3em;
    vertical-align: middle;
  }
}
.window-frame {
  $window-base-color: #DCD9DC;
  $window-width: 40rem;
  $window-height: $window-width * 0.618;
  $topbar-height: 2.5rem;
  $window-radius: 0.35rem;
  $window-control-radius: $topbar-height/3.01;
  
  position: relative;
  z-index: 100;
  width: $window-width;
  min-height: $window-height;
  margin: 3rem auto;
  padding: 0;
  box-shadow: 0 0.1rem 1rem 0 rgba(black, 0.5);
  border-radius: $window-radius;
  border: 1px solid rgba(black, 0.55);
  background-color: white;
  line-height: 1;

  &.focus {
    box-shadow: 0 0.333rem 2.8rem 0 rgba(black, 0.8);
  }
  .top-bar {
    background: $window-base-color;
    background-image: linear-gradient(tint($window-base-color, 55%), shade($window-base-color, 5%));
    min-height: 2rem;
    border-radius: $window-radius $window-radius 0 0;
    padding: ($window-control-radius/2) $window-control-radius;
    border-bottom: 1px solid transparent;
    box-shadow: inset 0 1px 1px rgba(white, 0.75);
    border-bottom-color: darken($window-base-color, 17%);
    color: rgba(black, 0.5);

    .address-bar {
      border-radius: ($window-radius * 0.7);
      border: 1px solid rgba(black, 0.3);
      color: black;
      box-shadow: 0 0.5px 0 0 rgba(white, 0.75),
                  inset 0 1px 1px rgba(black, 0.15);
      display: inline-block;
      padding: 0 0.5em 0 1.618em;
      font-size: 0.75rem;
      line-height: 2;
      background: white;
      width: 68%;
      
      &:before {
        font-family: FontAwesome;
        content: '\f023';
      }
    }
    .controls {
      display: inline-block;
      vertical-align: top;
      position: relative;
      padding-top: 0.2em;
      > * {
        position: relative;
        vertical-align: middle;
        line-height: 1;
        display: inline-block;
        margin-right: $window-control-radius/2;
        transition: 0.1s linear;
      }
    }
    .control {
      width: $window-control-radius;
      height: $window-control-radius;
      background: $window-base-color;
      border-radius: $window-control-radius;
      // box-shadow: inset 0 1px 1px rgba(black, 0.2);
      border: 1px solid rgba(black, 0.08);
      cursor: pointer;
      
      &:hover {
        background: shade($window-base-color, 20%);
      }
      &:before, &:after {
        line-height: 0.5;
        color: black;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        vertical-align: middle;
        line-height: 0.5;
      }
      &.close {
        background: #FC625C;
        &:hover {
          &:before {
            content: '\00d7';
          }
        }
      }
      &.minify {
        background: #FDC041;
        &:hover {
          &:before { content: '\2013'; }
        }
      }
      &.expand {
        background: #35CD4B;
        &:hover {
          &:before { content: '\2234'; }
        }
      }
    }
  }
  .window-content {
    padding: 0.75rem;
    line-height: 1.618;
  }
  .status-bar {
    @extend .top-bar;
    height: $topbar-height * 0.8;
    border-radius: 0 0 $window-radius $window-radius;
    display: none;
  }
}

YA-OS-X-window-in-pure-CSS.markdown

YA OS X window in pure CSS

Here's another OS X Yosemite window mockup. Maybe useful for me or somebody.

A Pen by oobleck on CodePen.

License.