Gamla Timey Terminal Styling

0
14

Jag såg en liten demo häromdagen som heter HTML5 Terminal. Den har vissa funktioner, men det verkar som det är bara lite för skojs skull. Som sagt, jag älskade det estetiska för det! Suddiga monospace typ med synliga övervaka linjer och en lysande grön bakgrund — nice!

Låt oss återskapa den, bit-för-bit.

En radiell övertoning är perfekt för den lysande grön bakgrund:

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

Jag är så van att med hjälp av <pre><code> för att visa space-formaterad text (som kod), men man kan säga terminal text är inte alltid kod, så jag gillar användningen av <pre><uteffekt av> här.

Kan lika väl använda en trevlig teckensnitt med fast teckenbredd:

body {

färg: vit.
font: 1.3 rem Inconsolata, monospace;
}

Texten på demo visas lite suddig. Vi kunde gå med en liten filter som filtrerar: blur(0.6 px);, men det verkar som oskärpa på det sättet kommer ut antingen alltför suddiga eller inte suddig nog. Låt oss prova att använda text-shadow istället:

body {

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

Nu ska de övervaka linjer! Helst skall de sitta på toppen av texten, så låt oss använda en ::after pseudo-element som absolut är placerade över hela området och använda ett upprepande linjär gradient för de linjer (eftersom det är alltid bra att undvika att använda bilder om vi kan):

kropp::efter {
innehåll: “”;
position: absolute;
top: 0;
left: 0;
bredd: 100vw;
höjd: 100vh;
bakgrund: upprepa-linear-gradient(
0deg,
rgba(svart, 0.15),
rgba(svart, 0.15) 1px,
öppet 1px,
öppet 2px
);
}

Du kan se dessa svaga svarta linjer på vitt här:

Och sedan över vår ursprungliga gröna burst bakgrund att slutföra utseende:

Det är en fin touch att lägga till en rolig urval stil och ta bort oskärpa för tydlighet när man väljer:

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

Komplett demo:

Se Pennan Terminalen Produktionen av Chris Coyier (@chriscoyier) på CodePen.