
Vi una pequeña demostración el otro día llamada HTML5 Terminal. Tiene alguna funcionalidad, pero parece que es solo un poco por diversión. Dicho esto, ¡me encantó la estética! Tipo monoespaciado borroso con líneas de monitor visibles y un fondo verde brillante: ¡genial!
Vamos a recrear eso, poco a poco.
Un degradado radial es perfecto para el fondo verde brillante:
body {
background-color: black;
background-image: radial-gradient(
rgba(0, 150, 0, 0.75), black 120%
);
height: 100vh;
}
Estoy tan acostumbrado a usar <pre><code>
para mostrar texto con formato de espacio (como código), pero se podría decir que el texto del terminal no siempre es código, así que me gusta el uso de <pre><output>
aquí.
También podría usar una buena fuente monoespaciada:
body {
...
color: white;
font: 1.3rem Inconsolata, monospace;
}
El texto de la demostración aparece un poco borroso. Podríamos ir con un filtro ligero como filter: blur(0.6px);
, pero parece que el desenfoque de esa manera sale demasiado borroso o no lo suficientemente borroso. Intentemos usar text-shadow
en lugar de:
body {
...
text-shadow: 0 0 5px #C8C8C8;
}
¡Ahora a esas líneas de monitor! Idealmente, deberían colocarse encima del texto, así que usemos un ::after
pseudo-elemento que está absolutamente posicionado sobre toda el área y usa un degradado lineal repetitivo para las líneas (porque siempre es bueno evitar usar imágenes si podemos):
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
);
}
Puedes ver estas tenues líneas negras en blanco aquí:
Y luego sobre nuestro fondo verde original para completar el look:
Es un buen toque agregar un estilo de selección divertido y eliminar el desenfoque para mayor claridad al seleccionar:
::selection {
background: #0080FF;
text-shadow: none;
}
demostración completa:
Vea la salida de la terminal del lápiz por Chris Coyier (@chriscoyier) en CodePen.