public
Created

A CodePen by douglasdeodato. Single Element Pure CSS MacBook Pro - This is just an experiment! There are certainly better ways to show an image of a MacBook, but none as fun as this :)

  • Download Gist
index.html
HTML
1
<i class="macbook"></i>
style.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
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;
}‚Äč

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.