老式终端样式

前几天我看到了一个名为 HTML5 Terminal 的小演示。它有一些功能，但似乎只是为了好玩。也就是说，我喜欢它的美学！模糊的等宽字体，带有可见的显示器线条和发光的绿色背景 - 太棒了！

让我们一步一步地重新创建它。

一个 径向渐变 非常适合发光的绿色背景

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

我习惯于使用 <pre><code> 来显示空格格式的文本（例如代码），但你可以说终端文本并不总是代码，所以我喜欢在这里使用 <pre><output>。

不妨使用一个不错的等宽字体

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

演示中的文本看起来有点模糊。我们可以使用一个轻微的滤镜，例如 filter: blur(0.6px);，但这种方式的模糊要么太模糊，要么不够模糊。我们试试用 text-shadow 代替

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

现在开始处理那些显示器线条！理想情况下，它们应该位于文本之上，所以让我们使用一个绝对定位在整个区域上的 ::after 伪元素，并使用一个重复的 线性渐变 来创建线条（因为尽量避免使用图像总是好的）

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

你可以在这里看到这些微弱的黑色线条出现在白色上

然后覆盖我们最初的绿色爆发背景以完成外观

添加一个有趣的选中样式并移除模糊以在选中时提高清晰度，这是一个不错的技巧

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

完整演示

查看 CodePen 上 Chris Coyier 的 终端输出。