Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pip-Boy Screen in CSS
<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

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.

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;
}
}
<link href="https://fonts.googleapis.com/css?family=Fira+Mono" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.