Old Timey Terminal Styling

Ich habe neulich eine kleine Demo namens HTML5 Terminal gesehen. Sie hat einige Funktionen, aber es scheint, als ob sie nur so zum Spaß ist. Trotzdem habe ich die Ästhetik geliebt! Unscharfer Monospace-Schriftzug mit sichtbaren Monitorlinien und einem leuchtend grünen Hintergrund – gut gemacht!

Lassen Sie uns das Stück für Stück nachbilden.

Ein Radialgradient ist perfekt für den leuchtend grünen Hintergrund

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

Ich bin es gewohnt, <pre><code> zu verwenden, um mit Leerzeichen formatierte Texte (wie Code) anzuzeigen, aber man könnte sagen, dass Terminaltexte nicht immer Code sind, daher gefällt mir hier die Verwendung von <pre><output>.

Nehmen wir eine schöne Monospace-Schriftart

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

Der Text in der Demo erscheint etwas unscharf. Wir könnten einen leichten Filter wie filter: blur(0.6px); verwenden, aber das Verzerren auf diese Weise ist entweder zu unscharf oder nicht unscharf genug. Versuchen wir stattdessen, text-shadow zu verwenden

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

Nun zu den Monitorlinien! Idealerweise sollten sie über dem Text liegen. Verwenden wir also ein ::after Pseudo-Element, das absolut über dem gesamten Bereich positioniert ist, und verwenden wir einen sich wiederholenden Lineargradienten für die Linien (weil es immer schön ist, Bilder zu vermeiden, wenn wir können)

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
  );
}

Hier sehen Sie diese schwachen schwarzen Linien auf weiß

Und dann über unserem ursprünglichen grünen Burst-Hintergrund, um den Look zu vervollständigen

Es ist eine nette Geste, einen lustigen Auswahlstil hinzuzufügen und die Unschärfe zur besseren Lesbarkeit bei der Auswahl zu entfernen

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

Komplette Demo

Sieh dir den Pen Terminal Output von Chris Coyier (@chriscoyier) auf CodePen an.