Gamle Timey Terminal Styling

0
28

Jeg så en liten demo andre dag heter HTML5-Terminal. Det har noen funksjonalitet, men det virker som det er bare litt for moro skyld. Som sagt, jeg elsket det estetiske med det! Uklare monospace skrive med synlig skjerm linjer og en glødende grønn bakgrunn — nice!

La oss gjenskape dette, bit-for-bit.

En radial gradient er perfekt for den glødende grønn bakgrunn:

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

Jeg er så vant til å bruke <pre><code> for å vise space-formatert tekst (som kode), men du kan si terminal tekst er ikke alltid kode, så jeg liker bruken av <pre><output> her.

Kan like godt bruke en fin monospace skrifttype:

body {

color: white;
skrifttype: 1.3 rem Inconsolata, monospace;
}

Teksten på demo vises litt uskarpt. Vi kan gå med en liten filter som filtrerer: blur(0.6 px), men det virker uskarpt på den måten kommer ut enten for uskarpe eller ikke dårlige nok. La oss prøve å bruke text-shadow i stedet:

body {

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

Nå på å overvåke de linjer! Ideelt sett bør de sitte på toppen av teksten, så la oss bruke en ::etter pseudo-element som er absolutt posisjonert over hele området og bruke et gjentakende lineær gradient for linjer (fordi det er alltid hyggelig å unngå å bruke bilder hvis vi kan):

kropp::etter {
innhold: “”;
position: absolute;
øverst: 0;
venstre: 0;
bredde: 100vw;
høyde: 100vh;
bakgrunn: gjenta-linear-gradient(
0deg,
rgba(svart, 0.15),
rgba(svart, 0.15) 1px,
gjennomsiktig 1px,
gjennomsiktig 2px
);
}

Du kan se disse svake svarte linjer på hvitt her:

Og så over våre opprinnelige grønne burst bakgrunn for å fullføre utseende:

Det er en fin touch for å legge til et morsomt utvalg stil og fjerne uskarpe for klarhet når du velger:

::utvalget {
bakgrunn: #0080FF;
text-shadow: ingen;
}

Komplett demo:

Se Penn Terminal Utgang av Chris Coyier (@chriscoyier) på CodePen.