CSS MacOS Big Sur Window
Created
May 16, 2022 02:25
-
-
Save yskxi/d1333f30c65756a052ce886031731a8a to your computer and use it in GitHub Desktop.
CSS MacOS Big Sur Window
This file contains 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"> | |
| <pre><code class="hljs css bash">npm install monosomething | |
| </code></pre> | |
| </div> |
This file contains 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 { | |
| border-top: 2.8em solid rgba(230, 230, 230, 0.3); | |
| box-shadow: 0 0.1em 1em 0 rgb(0 0 0 / 20%); | |
| position: relative; | |
| border-radius: 12px 12px 0 0; | |
| margin: 1em; | |
| flex: 1; | |
| } | |
| .browser-mockup:before { | |
| display: block; | |
| position: absolute; | |
| content: ''; | |
| top: -1.64em; | |
| left: 1.32em; | |
| width: 0.5em; | |
| height: 0.5em; | |
| border-radius: 50%; | |
| background-color: #f15f59; | |
| box-shadow: 0 0 0 2px #f15f59, 1.3em 0 0 2px #febb2b, 2.6em 0 0 2px #4bb749; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment