Old Timey Terminal Styling

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

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(
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.
Source: CssTricks

Posted on September 11, 2018 in code, css, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Support, Expert Drupal Development, html5, pre, The, Web Design Services

Share the Story

Back to Top