Old Timey Terminal Styling

I saw a little demo the other day called HTML5 Terminal. It has some functionality, but it seems like it’s just kinda for fun. That said, I loved the aesthetic of it! Blurry monospace type with visible monitor lines and a glowing green background — nice!

Let’s re-create that, bit-by-bit.

A radial gradient is perfect for the glowing green background:

body {
 background-color: black;
 background-image: radial-gradient(
 rgba(0, 150, 0, 0.75), black 120%
 );
 height: 100vh;
}

I’m so used to using <pre><code> to display space-formatted text (like code), but you could say terminal text isn’t always code, so I like the use of <pre><output> here.

Might as well use a nice monospace font:

body {
 ...
 color: white;
 font: 1.3rem Inconsolata, monospace;
}

The text on the demo appears a bit blurry. We could go with a slight filter like filter: blur(0.6px);, but it seems blurring that way comes out either too blurry or not blurry enough. Let’s try using text-shadow instead:

body {
 ...
 text-shadow: 0 0 5px #C8C8C8;
}

Now on to those monitor lines! Ideally, they should sit on top of the text, so let’s use an ::after pseudo-element that’s absolutely positioned over the whole area and use a repeating linear gradient for the lines (because it’s always nice to avoid using images if we can):

body::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: repeating-linear-gradient(
 0deg,
 rgba(black, 0.15),
 rgba(black, 0.15) 1px,
 transparent 1px,
 transparent 2px
 );
}

You can see these faint black lines on white here:

And then over our original green burst background to complete the look:

It’s a nice touch to add a fun selection style and remove the blurring for clarity when selecting:

::selection {
 background: #0080FF;
 text-shadow: none;
}

Complete demo:

See the Pen Terminal Output by Chris Coyier (@chriscoyier) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *

www.000webhost.com