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.
The post Old Timey Terminal Styling appeared first on CSS-Tricks.