Недавно мы увидели демонстрацию под названием «Терминал HTML5». Нам понравилось, как она выглядит: размытый моноширинный шрифт с  заметными полосами, как у экрана монитора, и светящийся зеленый фон.

Давайте реализуем это с помощью CSS, шаг за шагом.

Функция радиального градиента идеально подходит для создания светящегося зеленого фона:

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); ,  но он размывает или очень сильно, или недостаточно сильно. Лучше воспользоваться свойством тени текста вместо этого:

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

Теперь перейдем к созданию полос, как у экрана монитора. В идеале они должны находиться поверх текста, так что воспользуемся псевдоэлементом «после», который абсолютно спозиционирован над всей нужной областью, и зададим ему функцию повторяющегося линейного градиента для всех линий, так как всегда лучше по возможности избегать использования изображений:

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

Полная демонстрация работы полученного нами результата:

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Тонированные изображения с помощью множественных фоновых изображений
• Создание многострочного градиентного фона для текста
• Использование фильтров у фоновых изображений