building a terminal window using CSS
posted on November 11, 2014, 7:44 pm in
When talking about terminal commands, its easier to show when you add a little style. Here is a HTML / CSS template thats re-creates the OSX style terminal design for the web.
The HTML
<div class="terminal space shadow">
<div class="top">
<div class="btns">
<span class="circle red"></span>
<span class="circle yellow"></span>
<span class="circle green"></span>
</div>
<div class="title">bash -- 70x32</div>
</div>
<pre class="body">
commands
</pre>
</div>
The CSS
* { margin: 0; padding: 0; }
.terminal {
border-radius: 5px 5px 0 0;
position: relative;
}
.terminal .top {
background: #E8E6E8;
color: black;
padding: 5px;
border-radius: 5px 5px 0 0;
}
.terminal .btns {
position: absolute;
top: 7px;
left: 5px;
}
.terminal .circle {
width: 12px;
height: 12px;
display: inline-block;
border-radius: 15px;
margin-left: 2px;
border-width: 1px;
border-style: solid;
}
.title{
text-align: center;
}
.red { background: #EC6A5F; border-color: #D04E42; }
.green { background: #64CC57; border-color: #4EA73B; }
.yellow{ background: #F5C04F; border-color: #D6A13D; }
.clear{clear: both;}
.terminal .body {
background: black;
color: #7AFB4C;
padding: 8px;
overflow: auto;
}
.space {
margin: 25px;
}
.shadow { box-shadow: 0px 0px 10px rgba(0,0,0,.4)}
result
You'll get something like this.
bash -- 70x32
.. .. commands .. ..