code everywhere
technology, web services and applications

building a terminal window using CSS

posted on November 11, 2014, 7:44 pm in css, html

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

* { margin0padding0; }
.
terminal {
    
border-radius5px 5px 0 0;
    
positionrelative;
}
.
terminal .top {
    
background#E8E6E8;
    
colorblack;
    
padding5px;
    
border-radius5px 5px 0 0;
}
.
terminal .btns {
    
positionabsolute;
    
top7px;
    
left5px;
}
.
terminal .circle {
    
width12px;
    
height12px;
    
displayinline-block;
    
border-radius15px;
    
margin-left2px;
    
border-width1px;
    
border-stylesolid;
}
.
title{
    
text-aligncenter;
}
.
red background#EC6A5F; border-color: #D04E42; }
.green background#64CC57; border-color: #4EA73B; }
.yellowbackground#F5C04F; border-color: #D6A13D; }
.clear{clearboth;}
.
terminal .body {
    
backgroundblack;
    
color#7AFB4C;
    
padding8px;
    
overflowauto;
}
.
space {
    
margin25px;
}
.
shadow box-shadow0px 0px 10px rgba(0,0,0,.4)}

result

You'll get something like this.

bash -- 70x32
..
..
commands
..
..

recent posts

< back