Development

Vintage Terminal Effect in CSS3

Rudy Jahchan · January 7th, 2015

Recently I revamped my personal website. For the most part I kept it simple, having it generated by Middleman with styling and layout provided by Bootstrap. However, I wanted my header to reflect my love of the command-line and 80s nostalgia by having it act like a vintage terminal similar to Cathode app: scanlines, screen burn, green glow, with blinking cursor. Most importantly, I wanted to do it with CSS3 animations and no Javascript to minimize the impact on browsers. Building on the work of Lea Verou and Anders Evenrud, here’s how I did it.

Typing and Blinking in `steps()`

First thing I wanted was to have my name be “typed” out in the header on page load by a blinking cursor. Lea Verou covered exactly how to pull this off. It’s basically a “sliding door” effect where an element initially completely covering the text has its width shrunk to slowly reveal the content. The animation happens in discrete steps (literally using the steps() CSS3 timing function) so that after each step only one character is revealed. Every step will decrease the width by the same amount, so to ensure only a single character is revealed at a time a monospaced font (where every character has the same fixed width) will be used. Finally, the blinking block cursor is achieved by setting the covering element’s left border to that same fixed width and animating it’s color. Let’s see the code. The text is wrapped in an element (an anchor tag in my case) and a span playing the role of the covering element described above is appended with an empty space.

&lt;br&gt;
&amp;lt;a href="http://rudyjahchan.com"&amp;gt;Rudy Jahchan&amp;nbsp;&amp;lt;span class="cursor"&amp;gt;&amp;nbsp;&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;&lt;br&gt;

In the CSS, the anchor is set to have the monospace font and the span is absolute-ly positioned, anchoring it to the top, bottom, and left of its containing element. This is done so when the width changes, it shrinks towards the right side.

&lt;br&gt;
a {&lt;br&gt;
    position: relative;&lt;br&gt;
    font-family: monospace;&lt;br&gt;
    background-color: black;&lt;br&gt;
    text-decoration: none;&lt;br&gt;
    color: green;&lt;br&gt;
    font-size: 1.5em;&lt;br&gt;
}

.cursor {&lt;br&gt;
    position: absolute;&lt;br&gt;
    top: 0;&lt;br&gt;
    bottom: 0;&lt;br&gt;
    right: 0;&lt;br&gt;
    width: 0;&lt;br&gt;
    background; black;&lt;br&gt;
}&lt;br&gt;

A CSS3 animation is defined for the beginning and end state of the typing. At the start the span 100% matches the width of its parent to completely hide the text. The animation ends with the width set to 0 so that all the text is revealed (again, it’s a sliding door).

&lt;br&gt;
/* Need to add prefix variants */&lt;br&gt;
@keyframes typing {&lt;br&gt;
    from { width: 100%; }&lt;br&gt;
    to { width: 0; }&lt;br&gt;
}&lt;br&gt;

Then the animation is applied to the cursor with an appropriate duration and made to repeat infinite-ly.

&lt;br&gt;
.cursor {&lt;br&gt;
  // ...

  // Need to add vendor prefix variants&lt;br&gt;
  animation: typing 6s infinite;&lt;br&gt;
}&lt;br&gt;

At this point the animation smoothly reveals the text. We now add the steps() call, one for each character.

&lt;br&gt;
.cursor {&lt;br&gt;
  // ...

  // Need to add vendor prefix variants&lt;br&gt;
  animation: typing 6s steps(13, end) infinite;&lt;br&gt;
}&lt;br&gt;

Now for the blinking cursor. As described before, the cursor is actually the left border of the span, its size set to match a single character width of the chosen (again, monospaced!) font. This is the one thing I had to experiment with to get right as it can vary depending on the font used. Also, it’s very important that the box-sizing strategy of the element is set to border-box to ensure the border is drawn within the span element.

&lt;br&gt;
.cursor {&lt;br&gt;
    // ...

    // Need to add vendor prefix variants&lt;br&gt;
    box-sizing: border-box;&lt;br&gt;
    border-left: .5em solid;&lt;br&gt;
}&lt;br&gt;

Another animation is defined for the blinking that takes the border color from transparent to the cursor color and back.

&lt;br&gt;
@keyframes blinking {&lt;br&gt;
    from, to { border-color: transparent; }&lt;br&gt;
    50% { border-color: green; }&lt;br&gt;
}&lt;br&gt;

This animation is applied to the same span and set to toggle to step to the end state (step-end) within 1 second repeatedly.

&lt;br&gt;
.cursor {&lt;br&gt;
  // ...

  // Need to add vendor prefix variants&lt;br&gt;
  animation: typing 6s steps(13, end) infinite, blinking 1s step-end infinite;&lt;br&gt;
}&lt;br&gt;

And voila, my name is typed out with a blinking cursor.

Screen-burning

The next task was to get that glorious old school scan-line feel. Anders Evenrud created and amazing demo of a vintage terminal which I borrowed liberally from. The technique consists of structuring a number of div elements and their :before and :after pseudo elements to produce the entire effect.

&lt;br&gt;
&amp;lt;div id="faux-terminal"&amp;gt;&lt;br&gt;
  &amp;lt;div class="layer"&amp;gt;&amp;lt;/div&amp;gt;&lt;br&gt;
  &amp;lt;div class="overlay"&amp;gt;&amp;lt;/div&amp;gt;&lt;br&gt;
&amp;lt;/div&amp;gt;&lt;br&gt;

First there is the outer “screen” layer of faux-terminal. The fixed scanlines are drawn by styling the :before pseudo element to fill it’s background with a linear gradient. However, it also declares it’s background size as being only 4px size and repeating, thus creating the lines! The whole thing is given a high z-index to float over everything and a subtle pulse animation.

&lt;br&gt;
#faux-terminal:before {&lt;br&gt;
  // ... positioning&lt;br&gt;
  z-index: 4010;&lt;br&gt;
  background: linear-gradient(#444 50%, #000 50%);&lt;br&gt;
  background-size: 100% 4px;&lt;br&gt;
  background-repeat: repeat-y;&lt;br&gt;
  opacity: .14;&lt;br&gt;
  box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);&lt;br&gt;
  animation: pulse 5s linear infinite;&lt;br&gt;
}

@keyframes pulse {&lt;br&gt;
  0%   {transform: scale(1.001);  opacity: .14; }&lt;br&gt;
  8%   {transform: scale(1.000);  opacity: .13; }&lt;br&gt;
  15%  {transform: scale(1.004);  opacity: .14; }&lt;br&gt;
  30%  {transform: scale(1.002);  opacity: .11; }&lt;br&gt;
  100% {transform: scale(1.000);  opacity: .14; }&lt;br&gt;
}&lt;br&gt;

The :after pseudo element then adds a light “sheen” through a radiant gradient and box-shadow, the latter inset to have the effect within the element’s boundaries.

&lt;br&gt;
#faux-terminal:after {&lt;br&gt;
  // ... positioning&lt;br&gt;
  z-index : 4011;&lt;br&gt;
  background-color : $rudy-accent-color;&lt;br&gt;
  background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,$rudy-accent-color 100%);&lt;br&gt;
  box-shadow : inset 0px 0px 4px 4px rgba(100, 100, 100, .5);&lt;br&gt;
  opacity : .1;&lt;br&gt;
}

Next up is another layer for the actual green burn, achieved by a radient gradient from our terminal green to a dark grey and it’s own subtle glitching animation.

&lt;br&gt;
.layer {&lt;br&gt;
  // ... positioning&lt;br&gt;
  z-index : 4001;&lt;br&gt;
  box-shadow : inset 0px 0px 1px 1px rgba(64, 64, 64, .1);&lt;br&gt;
  background: radial-gradient(ellipse at center,darken($rudy-accent-color,1%) 0%,rgba(64,64,64,0) 50%);&lt;br&gt;
  transform-origin : 50% 50%;&lt;br&gt;
  transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03);&lt;br&gt;
  animation: glitch 1s linear infinite;&lt;br&gt;
  opacity: .9;&lt;br&gt;
}

.layer:after {&lt;br&gt;
  // ... positioning&lt;br&gt;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%);&lt;br&gt;
  opacity: .1;&lt;br&gt;
}

@keyframes glitch {&lt;br&gt;
  0%   {transform: scale(1, 1.002); }&lt;br&gt;
  50%   {transform: scale(1, 1.0001); }&lt;br&gt;
  100% {transform: scale(1.001, 1); }&lt;br&gt;
}&lt;br&gt;

Finally, we animate the scanline with an overlay whose :before pseudo element is fixed 5px tall and animated to repeatedly slide down.

&lt;br&gt;
.overlay {&lt;br&gt;
  // ... positioning&lt;br&gt;
  z-index: 4100;&lt;br&gt;
}

.overlay:before {&lt;br&gt;
  content : '';&lt;br&gt;
  position : absolute;&lt;br&gt;
  top : 0px;&lt;br&gt;
  width : 100%;&lt;br&gt;
  height : 5px;&lt;br&gt;
  background : #fff;&lt;br&gt;
  background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* W3C */&lt;br&gt;
  opacity : .1;&lt;br&gt;
  animation: vline 1.25s linear infinite;&lt;br&gt;
}

.overlay:after {&lt;br&gt;
  // ... positioning&lt;br&gt;
  box-shadow: 0 2px 6px rgba(25,25,25,0.2),&lt;br&gt;
              inset 0 1px rgba(50,50,50,0.1),&lt;br&gt;
              inset 0 3px rgba(50,50,50,0.05),&lt;br&gt;
              inset 0 3px 8px rgba(64,64,64,0.05),&lt;br&gt;
              inset 0 -5px 10px rgba(25,25,25,0.1);&lt;br&gt;
}

@keyframes vline {&lt;br&gt;
  0%   { top: 0px;}&lt;br&gt;
  100% { top: 100%;}&lt;br&gt;
}&lt;br&gt;

Now, here is where my implementation differs from Anders Evenrud’s. His layer structures wrap a text area containing the “output” of his virtual console. In my case, however, I wanted this effect to go over a Bootstrap navigation bar component. I did not want to go down the rabbit hole of restyling or redefining the component and decided to (somewhat hackely) absolute-ly position all the terminal layers over the toolbar. Since I was using SASS it was easy enough to make a mixin to help DRY-up the code. However, I ran into a huge problem. The virtual screen blocked all interactions with the navigation bar! This was easily remedied by setting the pointer-events property of the screen layer to none. All events are now passed through to the navigation bar. Whew! As you can see, a lot of CSS3 properties and functions were used along the way. While most are fully supported by all the major browsers some still require [vendor prefixing][], as noted in some of the sample code. Maintaining this long-term can be frustrating as the slightest change will need to be replicated. SASS mixins can alleviate some of these concerns but even better is autoprefixer. It parses your CSS and adds the necessary prefixes. Obviously you would not want to do this for every request in production but it’s perfect for static site generation and a snap to integrate.

Final Thoughts

One of the reasons I went with an all CSS3 solution was to avoid having an ongoing Javascript process driving the animation and taking up resources. That said, I want to investigate what is the impact of all these effects on performance. Regardless, it was great fun to implement and has me wanting to tackle other great 80s interfaces. Maybe the motion tracker from Alien or the Blade Runner zoom-and-enhance?

Vintage Terminal Effect in CSS3

Typing and Blinking in steps()

Screen-burning

Final Thoughts

Related Posts

Rudy Jahchan

Typing and Blinking in `steps()`