Alte Timey Terminal Styling

0
46

Ich sah eine kleine demo der andere Tag rief HTML5-Terminal. Es hat einige Funktionen, aber es scheint, wie es nur irgendwie zum Spaß. Das sagte, ich liebte die ästhetik! Verschwommen monospace-Typ mit dem monitor sichtbar Linien und einem leuchtend grünen hintergrund — schön!

Lassen Sie uns neu zu erstellen, dass, die bit für bit.

Einen radialen Farbverlauf ist perfekt für leuchtend grünen hintergrund:

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

Ich bin also verwendet, um mit Hilfe von <pre><code> display-space-formatierten text (wie code), aber Sie könnte sagen-terminal text ist nicht immer code, so wie ich die Verwendung von <pre><output> hier.

Könnte auch eine nette monospace-schriftart:

body {

Farbe: weiß;
schriftart: 1.3 rem-Inconsolata, monospace;
}

Der text auf der demo erscheint ein bisschen verschwommen. Könnte man mit einem leichten filter wie filter: blur(0.6 px); aber es scheint Unschärfen, die Art und Weise kommt entweder zu verschwommen oder nicht unscharf genug. Lassen Sie uns versuchen Sie es mit text-shadow statt:

body {

text-shadow: 0 0 5px #C8C8C8;
}

Nun an diesen monitor Zeilen! Am besten, Sie sitzen oben auf den text, so verwenden wir ein ::after pseudo-element, das absolut positioniert über das ganze Gebiet und verwenden einen sich wiederholenden linearen Farbverlauf für die Linien (da ist es immer schön, vermeiden Sie die Verwendung von Bildern, wenn wir können):

Körper::after {
content: “”;
position: absolute;
top: 0;
left: 0;
Breite: 100vw;
height: 100vh;
background: repeating-linear-gradient(
0deg,
rgba(schwarz, 0.15),
rgba(schwarz, 0.15) 1px,
transparente 1px,
transparent 2px
);
}

Sehen Sie diese schwache schwarze Linien auf weiß hier:

Und dann über unsere original green burst hintergrund um den look zu vervollständigen:

Es ist eine nette Geste, fügen Sie ein Spaß-Auswahl-Stil entfernen und die Unschärfe für Klarheit bei der Auswahl:

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

Komplette demo:

Finden Sie die Pen-Terminal-Ausgabe von Chris Coyier (@chriscoyier) auf CodePen.