Forked from Adrien Jarthon's Pen Pure CSS browser mockups.
A Pen by Giovani Oliveira on CodePen.
<div class="browser-mockup"> | |
<img src="http://placehold.it/500x300/fff/eee" /> | |
</div> | |
<div class="browser-mockup with-tab"> | |
<img src="http://placehold.it/500x300/fff/eee" /> | |
</div> | |
<div class="browser-mockup with-url"> | |
<img src="http://placehold.it/500x300/fff/eee" /> | |
</div> |
Forked from Adrien Jarthon's Pen Pure CSS browser mockups.
A Pen by Giovani Oliveira on CodePen.
/* Browser mockup code, scale as you wish using font-size */ | |
.browser-mockup { | |
border-top: 2em solid rgba(230, 230, 230, 0.7); | |
box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4); | |
position: relative; | |
border-radius: 3px 3px 0 0 | |
} | |
.browser-mockup:before { | |
display: block; | |
position: absolute; | |
content: ''; | |
top: -1.25em; | |
left: 1em; | |
width: 0.5em; | |
height: 0.5em; | |
border-radius: 50%; | |
background-color: #f44; | |
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; | |
} | |
.browser-mockup.with-tab:after { | |
display: block; | |
position: absolute; | |
content: ''; | |
top: -2em; | |
left: 5.5em; | |
width: 20%; | |
height: 0em; | |
border-bottom: 2em solid white; | |
border-left: 0.8em solid transparent; | |
border-right: 0.8em solid transparent; | |
} | |
.browser-mockup.with-url:after { | |
display: block; | |
position: absolute; | |
content: ''; | |
top: -1.6em; | |
left: 5.5em; | |
width: calc(100% - 6em); | |
height: 1.2em; | |
border-radius: 2px; | |
background-color: white; | |
} | |
.browser-mockup > * { | |
display: block; | |
} | |
/* Custom code for the demo */ | |
body { | |
background: linear-gradient(to right, #8e44ad, #c0392b); | |
display: flex; | |
} | |
.browser-mockup { | |
margin: 2em; | |
flex: 1; | |
} | |
img { | |
width: 100%; | |
} |