Skip to content

Instantly share code, notes, and snippets.

@phongjalvn

phongjalvn/css.css

Created July 22, 2012 14:10
Show Gist options
  • Save phongjalvn/3159815 to your computer and use it in GitHub Desktop.
Save phongjalvn/3159815 to your computer and use it in GitHub Desktop.
Download ZIP
css3 window
Raw
css.css
* {margin: 0; padding: 0;}
body {
background: url(http://cl.ly/BHEM/img.jpg);
background-size: cover;
padding: 40px;
}
/* OS X Window
======================================== */
.window {
background: -webkit-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #6A6A6A 1px, #EDEDED, #EDEDED 23px);
background: -moz-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #6A6A6A 1px, #EDEDED, #EDEDED 23px);
background: -ms-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #6A6A6A 1px, #EDEDED, #EDEDED 23px);
background: -o-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #6A6A6A 1px, #EDEDED, #EDEDED 23px);
background: linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #6A6A6A 1px, #EDEDED, #EDEDED 23px);
height: 147px;
width: 410px;
margin: 0 auto;
border-radius: 5px;
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
padding: 3px 5px;
text-align: left;
}
.container {
padding:15px
}
h1 {
font: normal normal 13px/20px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
text-align: center;
position:relative;
z-index:2;
top:-23px;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6);
color:#444;
}
h2 {
font: normal bold 13px/20px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
margin-bottom:3px;
}
p {
font: normal normal 11px/14px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
padding-top: 3px;
}
h2, p {
margin-left: 86px;
}
p a,
p a:link,
p a:visited,
p a:hover,
p a:active {
border-bottom: 1px dotted #888;
text-decoration: none;
color: #000;
}
nav{
height:19px;
}
nav a {
display: inline-block;
margin: 2px 2px 3px 2px;
width: 12px;
height: 12px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: #f36;
-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.5);
-moz-box-shadow: 0px 1px 0px rgba(255,255,255,.5);
box-shadow: 0px 1px 0px rgba(255,255,255,.5);
text-indent: -9999px;
position: relative;
}
nav a:before {
content: '';
display: block;
position: absolute;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow:inset 0 1px 4px rgba(0, 0, 0, .8);
-moz-box-shadow:inset 0 1px 4px rgba(0, 0, 0, .8);
box-shadow:inset 0 1px 4px rgba(0, 0, 0, .8);
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
nav a:after {
content: '';
display: block;
position: absolute;
top: 2px;
left: 1px;
bottom: 1px;
right: 1px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: -webkit-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7));
background: -moz-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7));
background: -ms-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7));
background: -o-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7));
background: linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7));
-webkit-box-shadow: inset 0px -3px -5px 3px rgba(255, 255, 255, 0.2), inset 0px 2px -5px 3px rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0px -3px -5px 3px rgba(255, 255, 255, 0.2), inset 0px 2px -5px 3px rgba(255, 255, 255, 0.2);
box-shadow: inset 0px -3px -5px 3px rgba(255, 255, 255, 0.2), inset 0px 2px -5px 3px rgba(255, 255, 255, 0.2);
}
nav a.close {
background: #FD4E4E;
}
nav a.minimize {
background: #F3BB55;
}
nav a.maximize {
background: #96D16F;
}
/* Button
======================================== */
.button {
font: normal normal 13px/20px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
height: 21px;
width:79px;
background:-webkit-linear-gradient(white 2px,#FCFCFC, #F3F3F3 11px, #ECECEC 4px, #FCFCFC 54px);
background:-moz-linear-gradient(white 2px,#FCFCFC, #F3F3F3 11px, #ECECEC 4px, #FCFCFC 54px);
background:-ms-linear-gradient(white 2px,#FCFCFC, #F3F3F3 11px, #ECECEC 4px, #FCFCFC 54px);
background:-o-linear-gradient(white 2px,#FCFCFC, #F3F3F3 11px, #ECECEC 4px, #FCFCFC 54px);
background:linear-gradient(white 2px,#FCFCFC, #F3F3F3 11px, #ECECEC 4px, #FCFCFC 54px);
display:block;
float:right;
margin-top:5px;
cursor: pointer;
text-align: center;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0px 0px 0px 1px #909090, 0px 1px 0px 0px #DFDFDF;
-moz-box-shadow:inset 0px 0px 0px 1px #909090, 0px 1px 0px 0px #DFDFDF;
box-shadow:inset 0px 0px 0px 1px #909090, 0px 1px 0px 0px #DFDFDF;
color:#000;
text-decoration:none;
}
/* OS X Lion Profile
======================================== */
.profile{
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
display:block;
position:relative;
width:60px;
height:60px;
background-color: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)),to(rgb(203, 203, 204)));
background-image: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(203, 203, 204));
background-image: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(203, 203, 204));
background-image: -o-linear-gradient(top, rgb(255, 255, 255), rgb(203, 203, 204));
background-image: -ms-linear-gradient(top, rgb(255, 255, 255), rgb(203, 203, 204));
background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(203, 203, 204));
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#cbcbcc');
margin:0 auto;
padding:3px;
-webkit-box-reflect:below 0px -webkit-linear-gradient(transparent 81%, rgba(0,0,0,.5) 120%);
-webkit-box-shadow:inset 0px 0px 1px 1px rgba(0, 0, 0, 0.18);
-moz-box-shadow:inset 0px 0px 1px 1px rgba(0, 0, 0, 0.18);
box-shadow:inset 0px 0px 1px 1px rgba(0, 0, 0, 0.18);
float:left;
}
.profile:before{
content: '';
display: block;
-webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.5);
height:60px;
width:60px;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
position: absolute;
z-index:0;
}
.profile:after{
z-index: -2;
width:60px;
height:0;
-webkit-box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.14);
-moz-box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.14);
box-shadow:0 0 5px 1px rgba(0, 0, 0, 0.14);
position: absolute;
content:'';
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
display:block;
bottom:0;
left:0;
right:0;
margin:0 auto;
}
.profile img{
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
z-index: 1;
position:absolute;
max-width:60px;
height:auto;
}​
Raw
html.html
<div class="window drag">
<nav>
<a href="#" class="close"></a>
<a href="#" class="minimize"></a>
<a href="#" class="maximize"></a>
<h1>CSS3 OS X Window</h1>
</nav>
<div class="container">
<div class="profile">
<img src="http://i.minus.com/ibwWTSsfSR45G4.png">
</div>
<h2>This window is made purely with CSS3</h2>
<p>It sure is magical, a draggable window made without any images! The possibilities of CSS3 are endless!</p>
<p>Made with love by <a href="javascript:void(0);">Louis Bullock.</a></p>
<a href="#" class="button">Quit</a>
</div>
</div>​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment