michaelminter
9/20/2012 - 3:36 AM

The terminal with CSS3

The terminal with CSS3

index.html
content_copyfile_download
<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'>&#8660;</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>
script.js
content_copyfile_download
//Im not MacOSX User, if some element is not correct please informed
//Actually im Ubuntu User :)
style.css
content_copyfile_download
@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;
}