Skip to content

Instantly share code, notes, and snippets.

@darkyen

darkyen/index.html

Created Oct 16, 2012
Embed
What would you like to do?
This is just an experiment! There are certainly better ways to show an image of a MacBook, but none as fun as this :)
<i class="macbook"></i>
html {
background-image: linear-gradient(#8b9da9, #fff6e4);
box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
min-height: 100%;
}
.macbook {
background-color: #082746;
background-image: linear-gradient(20deg, transparent 67%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,100%,.025)),
linear-gradient(#ddd 11px, transparent 11px),
linear-gradient(#132d4e, #4f7d90);
border-radius: 8px 8px 0 0;
box-shadow: inset 0 1px 1px 1px #000,
inset 0 0 0 9px #111,
0 0 0 1px #ccc,
0 0 1px 2px hsla(0,0%,0%,.4),
0 0 50px hsla(0,0%,0%,.3);
height: 100px;
display: block;
left: 50%;
margin: -50px -75px;
position: absolute;
top: 50%;
width: 150px;
}
.macbook:after {
background-color: #ddd;
background-image: linear-gradient(left, hsla(0,0%,0%,.3), hsla(0,0%,100%,.4) 2%, hsla(0,0%,100%,.1) 5%, hsla(0,0%,0%,.2) 95%, hsla(0,0%,100%,.2) 98%, hsla(0,0%,0%,.4));
border-bottom: 3px solid hsla(0,0%,40%,.75);
border-radius: 0 0 4px 4px;
box-shadow: 0 3px 7px hsla(0,0%,0%,.1);
content: '';
height: 7px;
left: -22px;
position: absolute;
right: -22px;
top: 100%;
}
.macbook:before {
background-color: #222;
border-radius: 100%;
box-shadow: inset 1px 1px 0 hsla(0,0%,100%,.1),
-13px 96px 0 -1px #888,
-13px 97px 0 -1px #888,
-11px 97px 0 #888,
-9px 97px 0 #888,
-7px 97px 0 #888,
-5px 97px 0 #888,
-3px 97px 0 #888,
-1px 97px 0 #888,
1px 97px 0 #888,
3px 97px 0 #888,
5px 97px 0 #888,
7px 97px 0 #888,
9px 97px 0 #888,
11px 97px 0 #888,
13px 97px 0 -1px #888,
13px 96px 0 -1px #888,
80px 99px 0 -1px #666,
81px 99px 0 -1px #666,
82px 99px 0 -1px #666,
83px 99px 0 -1px #666,
84px 99px 0 -1px #666,
85px 99px 0 -1px #666;
content: '';
height: 3px;
left: 50%;
margin-left: -2px;
position: absolute;
top: 3px;
width: 3px;
z-index: 1;
}​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.