Pip-Boy Screen in CSS

index.html

<div class="screen">
  <p>It was this howling and firing of the guns at Ripley and St. George's Hill that we had heard at Upper Halliford. The Ripley gunners, unseasoned artillery volunteers who ought never to have been placed in such a position, fired one wild, premature, ineffectual volley, and bolted on horse and foot through the deserted village, while the Martian, without using his Heat-Ray, walked serenely over their guns, stepped gingerly among them, passed in front of them, and so came unexpectedly upon the guns in Painshill Park, which he destroyed.</p>
  <p style="text-align:right">H. G. Wells - The War of the Worlds, Chapter 15</p>
</div>

pip-boy-screen-in-css.markdown

Pip-Boy Screen in CSS

An old-style screen display loosely based on the Pip-Boy from Fallout 4. It's all CSS with some animations.

A Pen by Chris Smith on CodePen.

License.

style.css

body {
  background-color:#000;
  margin:0;
  overflow:hidden;
  padding:0;
}

.screen {
  animation:colorPulse 5s infinite ease-in-out;
  background-image:radial-gradient(#444, #111);
  box-shadow:0 0 5vmin 1vmin #000 inset;
  box-sizing:border-box;
  font-family:'Fira Mono', monospace;
  font-size:20px;
  height:100vh;
  overflow:hidden;
  padding:10vmin;
  width:100vw;
}

.screen:before {
  animation:wave 10s infinite ease-in-out;
  content:"";
  height:20vh;
  left:0;
  opacity:.5;
  position:absolute;
  right:0;
  z-index:1;
}

.screen:after {
  background-image:linear-gradient(transparent, transparent 3px, #222);
  background-size:4px 4px;
  bottom:0;
  content:"";
  left:0;
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  z-index:2;
}

p:last-child:after {
  animation:blink 1s infinite;
  content:"_";
}

@keyframes colorPulse {
  0%, 100% {
    color:#0c0;
  }
  48%, 52% {
    color:#090;
  }
  50% {
    color:#060;
  }
}

@keyframes wave {
  0% {
    box-shadow:0 -10vh 20vh #0c0;
    top:-100vh;
  }
  48%, 52% {
    box-shadow:0 -10vh 20vh #090;
  }
  50% {
    box-shadow:0 -10vh 20vh #060;
  }
  100% {
    box-shadow:0 -10vh 20vh #0c0;
    top:200vh;
  }
}

@keyframes blink {
  50% {
    opacity:0;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet" />