Skip to content

Instantly share code, notes, and snippets.

@chr15m

chr15m/vintage-old-school-console-effect-css.html

Created March 15, 2019 07:41
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chr15m/ba1272ef905bafce0b51068c7d93193b to your computer and use it in GitHub Desktop.
Save chr15m/ba1272ef905bafce0b51068c7d93193b to your computer and use it in GitHub Desktop.
Download ZIP
Vintage old-school console effect boilerplate HTML and CSS
Raw
vintage-old-school-console-effect-css.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Vintage console</title>
<script>
function log(message) {
document.getElementById("log").textContent += message + "\n";
}
</script>
<style>
body { background-color: #333; font-size: 1.5em; padding: 0em 0.25em; }
body { background: linear-gradient(to bottom, #333, #333 50%, #3a3a3a 50%, #3a3a3a); background-size: 100% 4px; }
pre { color: #ffedcc; white-space: pre-wrap; word-wrap: break-word; }
pre { text-shadow: 0 0 3px #ffa500; text-shadow: 0 0 10px #ffa500; }
pre::after { content: "_"; font-weight: bold; animation: blinking 0.75s step-end infinite; }
@keyframes blinking { from, to { visibility: hidden; } 50% { visibility: visible; } }
</style>
</head>
<body><pre id="log"></pre></body>
<script>
// Your code goes here!
log("Hello world!");
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment