Created
September 20, 2012 03:36
-
-
Save michaelminter/3753834 to your computer and use it in GitHub Desktop.
The terminal with CSS3
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
| <body> | |
| <div class='window'> | |
| <div class='header'> | |
| <a href="#" class='prp close'></a> | |
| <a href="#" class='prp min'></a> | |
| <a href="#" class='prp max'></a> | |
| <a href="#" class='maxer'>⇔</a> | |
| <span>Terminal - Bash - 50x30</span> | |
| </div> | |
| <pre> | |
| Last login : Fri May 25 15:00:23 on ttyp1 | |
| Welcome to Darwin! | |
| Martabakk:~/usr gosong$ | |
| </pre> | |
| </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
| //Im not MacOSX User, if some element is not correct please informed | |
| //Actually im Ubuntu User :) |
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
| @import url(http://fonts.googleapis.com/css?family=Open+Sans); | |
| html{ | |
| height:100% | |
| } | |
| body{ | |
| background: -webkit-linear-gradient(45deg, #7db4d2 0%,#aeb6c9 100%); | |
| background: -moz-linear-gradient(45deg, #7db4d2 0%,#aeb6c9 100%); | |
| background: -o-linear-gradient(45deg, #7db4d2 0%,#aeb6c9 100%); | |
| } | |
| .prp{ | |
| background: #f76b50; | |
| width: 12px; | |
| height: 12px; | |
| display: block; | |
| border-radius: 100%; | |
| box-shadow: 0px 1px 5px #853222 inset,0px 1px 0px rgba(255,255,255,0.5); | |
| float: left; | |
| margin:0px 5px; | |
| } | |
| .prp:before{ | |
| content: ''; | |
| border-radius: 100%; | |
| width: 7px; | |
| height: 3px; | |
| background: transparent; | |
| position: absolute; | |
| margin: -3px 3px; | |
| box-shadow: 0px 5px 3px white; | |
| } | |
| .prp:after{ | |
| content: ''; | |
| border-radius: 100%; | |
| width: 10px; | |
| height: 4px; | |
| background: transparent; | |
| position: absolute; | |
| margin: 2px 1px; | |
| box-shadow: 0px 5px 6px white; | |
| } | |
| .min{ | |
| background: #f5bf67; | |
| box-shadow: 0px 1px 5px #876212 inset,0px 1px 0px rgba(255,255,255,0.5); | |
| } | |
| .max{ | |
| background: #a3db82; | |
| box-shadow: 0px 1px 5px #5a6e49 inset,0px 1px 0px rgba(255,255,255,0.5); | |
| } | |
| .header{ | |
| background: -webkit-linear-gradient(top, #e5e5e5 0%,#bababa 100%, #bababa 100%); | |
| background: -moz-linear-gradient(top, #e5e5e5 0%,#bababa 100%, #bababa 100%); | |
| background: -o-linear-gradient(top, #e5e5e5 0%,#bababa 100%, #bababa 100%); | |
| border-radius: 5px 5px 0px 0px; | |
| border-bottom: 1px solid #888; | |
| height: 13px; | |
| padding:5px; | |
| box-shadow: 0px 1px 2px rgba(0,0,0,0.1); | |
| } | |
| .window{ | |
| margin:0px auto; | |
| margin-top: 20px; | |
| width: 500px; | |
| border:1px solid #888; | |
| background: #222220; | |
| border-radius: 7px 7px 5px 5px; | |
| min-height: 300px; | |
| box-shadow: 0px 5px 20px rgba(0,0,0,0.3); | |
| } | |
| .maxer{ | |
| font-size: 20px; | |
| color:#8D8D8D; | |
| text-shadow:0px 1px 0px #fff; | |
| text-decoration: none; | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| display: block; | |
| float: right; | |
| line-height: 14px; | |
| } | |
| .header span{ | |
| display: block; | |
| text-align: center; | |
| color:#000; | |
| font-size: 11px; | |
| text-shadow:0px 1px 0px #fff; | |
| font-family: "Open Sans", Sans-serif; | |
| padding: 0px 50px; | |
| line-height: 13px; | |
| } | |
| .window pre{ | |
| color:#fff; | |
| margin:3px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment