Like a Mac(OS X) Window (one div)

index.html

<div class="mac"></div>

Like a Mac(OS X) Window (one div).markdown

Like a Mac(OS X) Window (one div)

Made with :before pseudo and box-shadow. By Kaushalya Mandaliya.

A Pen by Kaushalya Mandaliya on CodePen.

License.

Like-a-Mac-Browser-.markdown

Like a Mac Browser

Made with :before pseudo and box-shadow. By Kaushalya Mandaliya.

A Pen by kaushalya on CodePen.

License.

Like-a-Mac-Window-(one-div).markdown

Like a Mac Window (one div)

Made with :before pseudo and box-shadow. By Kaushalya Mandaliya.

A Pen by Kaushalya Mandaliya on CodePen.

License.

script.js

/*
--
-- 2015 by Kaushalya Mandaliya.
-- http://seebeetee.com
-- https://twitter.com/kmandalwala 
--
*/

style.css

@import "compass/css3";

body {
  background: #ddd;
}
.mac {
  position: relative;
  height: 30em;
  width: 52%;
  margin: 3em auto;
  @include background(linear-gradient(top, #aaa 10%,#ddd 10%,#fff 90%));
  @include border-radius(0.5em);
  @include box-shadow(inset 0 0.9em 1em #999);
}
.mac:before {
  content: '';
  position: absolute;
  height: 0.8em;
  width: 0.8em;   
  margin: 1em;
  @include border-radius(100%);
  background: #ccc;
  @include box-shadow(1.4em 0em #ccc, 2.8em 0em #ccc);
  @include transition(0.3s all ease-in-out);
}
.mac:hover:before {
  background: rgba(255, 0, 0, 0.8);
  @include box-shadow(1.4em 0em rgba(255, 255, 0, 0.8), 2.8em 0em rgba(0, 255, 0, 0.8));
}