Forked from Adrien Jarthon's Pen Pure CSS browser mockups.
A Pen by Giovani Oliveira on CodePen.
Created
December 1, 2014 00:26
-
-
Save cgiovanii/0f347dfff890d87d4302 to your computer and use it in GitHub Desktop.
Pure CSS browser mockups
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment