Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                ol.snow-bros
  li.a
  li.b
  li.c
  li.d
  li.e
  li.f
  li.g
  li.h
  li.i
  li.j
  li.k
  li.l
  li.m
  li.n
  li.o
  li.p
  li.q
  li.r
  li.s
  li.t
  li.u
  li.v
  li.w
  li.x
  li.y
  li.z
ol.snow-bros
  li.zero
  li.one
  li.two
  li.three
  li.four
  li.five
  li.six
  li.seven
  li.eight
  li.nine
              
            
!

CSS

              
                // Arcade Lettering from Snow Bros. (1990)
// As seen in Toshi Omagari’s book Arcade Game Typography: https://readonlymemory.vg/shop/book/arcade-game-typography/

$blue = #00A2E2
$blue-light = #09C5D8
$green = #00A323
$shadow = #3D060A

$green-single = linear-gradient(to top,  $shadow 10px,
                                         $green 10px, $green 20px,
                                         $blue-light 20px, $blue-light 30px,
                                         $blue 30px)
$green-double = linear-gradient(to top,  $shadow 10px,
                                         $green 10px, $green 30px,
                                         $blue-light 30px, $blue-light 40px,
                                         $blue 40px)
full(color)
  linear-gradient(to top, color, color)
green(direction)
  linear-gradient(to direction, $shadow 10px, $green 10px)
blue(direction)
  linear-gradient(to direction, $shadow 10px, $blue 10px)
blue-light(direction)
  linear-gradient(to direction, $shadow 10px, $blue-light 10px)
halfsies(color1,color2,direction)
  linear-gradient(to direction, color1 50%, color2 50%)
  
span(width1, width2)
  (10px * width1) (10px * width2)

body
  padding: 30px
  background-color: #eee

.snow-bros li
  width: 80px
  height: @width
  margin: 15px
  background-repeat: no-repeat
  display: inline-block
 
  &.a
    background-image: blue(left),
                      $green-double,
                      full($shadow),
                      blue(left),
                      blue(top),
                      full($shadow),
                      $green-double,
                      full($shadow)
    background-size: span(5,1),
                     span(3,7),
                     span(1,1),
                     span(2,1),
                     span(2,2),
                     span(1,8),
                     span(2,6),
                     span(1,6)
    background-position: span(1,0),
                         span(0,1),
                         span(4,1),
                         span(5,1),
                         span(3,3),
                         span(3,0),
                         span(5,2),
                         span(7,2)
  &.b
    background-image: $green-double,
                      blue(left),
                      full($shadow),
                      blue(left),
                      blue(left),
                      full($shadow),
                      green(top),
                      full($shadow),
                      $green-double,
                      full($shadow)
    background-size: span(3,8),
                     span(4,1),
                     span(1,1),
                     span(3,2),
                     span(4,1),
                     span(1,1),
                     span(2,2),
                     span(1,8),
                     span(2,4),
                     span(1,4)
    background-position: span(0,0),
                         span(3,0),
                         span(4,1),
                         span(5,1),
                         span(3,3),
                         span(4,4),
                         span(3,6),
                         span(3,0),
                         span(5,4),
                         span(7,4)

  &.c
    background-image: $green-single,
                      $green-double,
                      blue(left),
                      full($shadow),
                      blue(left),
                      green(left),
                      green(left),
                      full($shadow),
                      full($shadow)
    background-size: span(1,6),
                     span(2,8),
                     span(4,1),
                     span(1,1),
                     span(3,1),
                     span(3,1),
                     span(4,1),
                     span(2,1),
                     span(1,8)
    background-position: span(0,1),
                         span(1,0),
                         span(3,0),
                         span(4,1),
                         span(5,1),
                         span(5,5),
                         span(3,6),
                         span(4,7),
                         span(3,0)

  &.d
    background-image: $green-double,
                      blue(left),
                      blue(left),
                      blue(left),
                      green(top),
                      $green-single,
                      full($shadow),
                      full($shadow)
    background-size: span(3,8),
                     span(2,1),
                     span(2,1),
                     span(2,1),
                     span(3,2),
                     span(2,4),
                     span(1,8),
                     span(1,3)
    background-position: span(0,0),
                         span(3,0),
                         span(4,1),
                         span(5,2),
                         span(3,6),
                         span(5,3),
                         span(3,0),
                         span(7,3)

  &.e
    background-image: $green-double,
                      blue(left),
                      full($shadow),
                      blue(left),
                      full($shadow),
                      green(left),
                      full($shadow),
                      full($shadow)
    background-size: span(3,8),
                     span(5,1),
                     span(5,1),
                     span(5,1),
                     span(5,1),
                     span(5,1),
                     span(5,1),
                     span(1,8)
    background-position: span(0,0),
                         span(3,0),
                         span(4,1),
                         span(3,3),
                         span(4,4),
                         span(3,6),
                         span(4,7),
                         span(3,0)

  &.f
    background-image: $green-double,
                      blue(left),
                      full($shadow),
                      blue(left),
                      full($shadow),
                      full($shadow)
    background-size: span(3,8),
                     span(5,1),
                     span(5,1),
                     span(5,1),
                     span(5,1),
                     span(1,8)
    background-position: span(0,0),
                         span(3,0),
                         span(4,1),
                         span(3,3),
                         span(4,4),
                         span(3,0)
 &.g
   background-image: $green-single,
                     $green-double,
                     blue(left),
                     full($shadow),
                     blue(top),
                     blue(top),
                     $green-double,
                     green(top),
                     full($shadow),
                     full($shadow)
   background-size: span(1,6),
                    span(2,8),
                    span(4,1),
                    span(1,1),
                    span(2,2),
                    span(1,2),
                    span(2,5),
                    span(2,2),
                    span(1,7),
                    span(1,8)
   background-position: span(0,1),
                        span(1,0),
                        span(3,0),
                        span(4,1),
                        span(5,1),
                        span(4,3),
                        span(5,3),
                        span(3,6),
                        span(7,1),
                        span(3,0)
  &.h
    background-image: $green-double,
                      blue(top),
                      full($shadow),
                      $green-double,
                      full($shadow)
    background-size: span(3,8),
                     span(2,2),
                     span(1,8),
                     span(2,8),
                     span(1,8)
    background-position: span(0,0),
                         span(3,3),
                         span(3,0),
                         span(5,0),
                         span(7,0)
  &.i
    background-image: $green-double,
                      full($shadow)
    background-size: span(3,8),
                     span(1,8)
    background-position: span(2,0),
                         span(5,0)
  &.j
    background-image: blue-light(left),
                      green(left),
                      full($shadow),
                      green(top),
                      $green-double,
                      $green-single,
                      full($shadow)
    background-size: span(4,1),
                     span(4,1),
                     span(1,1),
                     span(4,2),
                     span(1,8),
                     span(1,7),
                     span(1,7)
    background-position: span(0,4),
                         span(0,5),
                         span(0,6),
                         span(1,6),
                         span(5,0),
                         span(6,0),
                         span(7,0)

  &.k
    background-image: $green-double,
                      blue(left),
                      blue(left),
                      blue(left),
                      blue(left),
                      full($blue-light),
                      full($green),
                      green(right),
                      full($shadow),
                      full($shadow)
    background-size: span(3,8),
                     span(3,1),
                     span(3,1),
                     span(3,1),
                     span(2,1),
                     span(2,1),
                     span(2,1),
                     span(3,1),
                     span(1,8),
                     span(3,1)
    background-position: span(0,0),
                         span(5,0),
                         span(4,1),
                         span(3,2),
                         span(3,3),
                         span(3,4),
                         span(4,5),
                         span(4,6),
                         span(3,0),
                         span(5,7)

  &.l
    background-image: $green-double,
                      green(left),
                      full($shadow),
                      full($shadow)
    background-size: span(3,8),
                     span(5,1),
                     span(1,8),
                     span(5,1)
    background-position: span(0,0),
                         span(3,6),
                         span(3,0),
                         span(3,7)
                           
  &.m
    background-image: blue(left),
                      $green-double,
                      blue(bottom),
                      blue(top),
                      full($shadow),
                      $green-double,
                      full($shadow)
    background-size: span(3,1),
                     span(3,7),
                     span(1,3),
                     span(1,3),
                     span(1,4),
                     span(2,8),
                     span(1,8)
    background-position: span(0,0),
                         span(0,1),
                         span(3,1),
                         span(4,1),
                         span(3,4),
                         span(5,0),
                         span(7,0)

  &.n
    background-image: $green-double,
                      $green-double,
                      linear-gradient(to bottom, $blue 20px, $shadow 20px),
                      linear-gradient(to bottom, $blue 10px, $blue-light 10px, $blue-light 20px, $shadow 20px),
                      $green-double,
                      full($shadow)
    background-size: span(2,8),
                     span(1,7),
                     span(1,6),
                     span(1,3),
                     span(2,8),
                     span(1,8)
    background-position: span(0,0),
                         span(2,1),
                         span(3,2),
                         span(4,3),
                         span(5,0),
                         span(7,0)
                           
  &.o,
  &.zero
    background-image: $green-single,
                      $green-double,
                      blue(top),
                      full($shadow),
                      green(top),
                      full($shadow),
                      $green-double,
                      $green-single,
                      full($shadow)
    background-size: span(1,6),
                     span(2,8),
                     span(2,2),
                     span(1,1),
                     span(2,2),
                     span(1,8),
                     span(1,8),
                     span(1,6),
                     span(1,6)
    background-position: span(0,1),
                         span(1,0),
                         span(3,0),
                         span(6,0),
                         span(3,6),
                         span(3,0),
                         span(5,0),
                         span(6,1),
                         span(7,1)
                         
  &.p
    background-image: $green-double,
                      blue(left),
                      full($shadow),
                      blue(left),
                      blue(left),
                      blue-light(left),
                      full($shadow),
                      full($shadow)
    background-size: span(3,8),
                     span(3,1),
                     span(1,1),
                     span(2,1),
                     span(3,2),
                     span(5,1),
                     span(1,8),
                     span(3,1)
    background-position: span(0,0),
                         span(3,0),
                         span(4,1),
                         span(5,1),
                         span(5,2),
                         span(3,4),
                         span(3,0),
                         span(4,5)
                           
  &.q
    background-image: $green-single,
                      $green-double,
                      blue(top),
                      full($shadow),
                      green(top),
                      blue-light(top),
                      full($shadow),
                      $green-double,
                      $green-double,
                      full($shadow)
    background-size: span(1,6),
                     span(2,8),
                     span(2,2),
                     span(1,1),
                     span(2,2),
                     span(2,2),
                     span(1,8),
                     span(1,8),
                     span(1,7),
                     span(1,7)
    background-position: span(0,1),
                         span(1,0),
                         span(3,0),
                         span(6,0),
                         span(3,6),
                         span(3,4),
                         span(3,0),
                         span(5,0),
                         span(6,1),
                         span(7,1)
                           
  &.r
    background-image: $green-double,
                      blue(left),
                      full($shadow),
                      linear-gradient(to bottom, $blue 10px, $blue-light 10px),
                      full($shadow),
                      blue(left),
                      full($shadow),
                      full($green),
                      green(right),
                      full($shadow)
    background-size: span(3,8),
                     span(4,1),
                     span(1,1),
                     span(2,2),
                     span(1,8),
                     span(3,3),
                     span(3,1),
                     span(2,1),
                     span(3,1),
                     span(3,1)
    background-position: span(0,0),
                         span(3,0),
                         span(4,1),
                         span(3,3),
                         span(3,0),
                         span(5,1),
                         span(5,4),
                         span(4,5),
                         span(4,6),
                         span(5,7)
                       
  &.s
    background-image: blue(left),
                      blue(left),
                      blue(right),
                      full($shadow),
                      full($shadow),
                      blue(right),
                      blue(left),
                      full($shadow),
                      blue-light(left),
                      green(left),
                      green(left),
                      green(right),
                      green(left),
                      full($shadow)
    background-size: span(6,1),
                     span(4,2),
                     span(3,1),
                     span(1,1),
                     span(3,1),
                     span(3,1),
                     span(4,1),
                     span(4,1),
                     span(3,1),
                     span(4,1),
                     span(3,1),
                     span(3,1),
                     span(4,1),
                     span(6,1)
    background-position: span(1,0),
                         span(0,1),
                         span(4,1),
                         span(7,1),
                         span(5,2),
                         span(0,3),
                         span(3,3),
                         span(1,4),
                         span(5,4),
                         span(0,5),
                         span(5,5),
                         span(0,6),
                         span(3,6),
                         span(1,7)
                           
  &.t
    background-image: blue(left),
                      $green-double,
                      full($shadow),
                      full($shadow)
    background-size: span(8,1),
                     span(3,7),
                     span(8,1),
                     span(1,7)
    background-position: span(0,0),
                         span(2,1),
                         span(0,1),
                         span(5,1)
                           
  &.u
    background-image: $green-single,
                      $green-double,
                      green(top),
                      full($shadow),
                      $green-double,
                      $green-single,
                      full($shadow)
    background-size: span(1,7),
                     span(2,8),
                     span(2,2),
                     span(1,8),
                     span(1,8),
                     span(1,7),
                     span(1,7)
    background-position: span(0,0),
                         span(1,0),
                         span(3,6),
                         span(3,0),
                         span(5,0),
                         span(6,0),
                         span(7,0)
                           
  &.v
    background-image: blue(left),
                      blue(left),
                      blue-light(right),
                      blue-light(right),
                      full($shadow),
                      green(right),
                      green(left),
                      green(right),
                      full($shadow),
                      full($shadow)
    background-size: span(4,4),
                     span(3,4),
                     span(3,1),
                     span(3,1),
                     span(1,1),
                     span(3,1),
                     span(2,1),
                     span(2,1),
                     span(1,1),
                     span(1,1)
    background-position: span(0,0),
                         span(5,0),
                         span(0,4),
                         span(3,4),
                         span(6,4),
                         span(1,5),
                         span(4,5),
                         span(2,6),
                         span(4,6),
                         span(3,7)
                           
  &.w
    background-image: $green-double,
                      $green-single,
                      full($shadow),
                      blue(left),
                      full($blue-light),
                      green(right),
                      $green-double,
                      full($shadow)
    background-size: span(2,8),
                     span(1,7),
                     span(1,3),
                     span(2,1),
                     span(2,1),
                     span(2,1),
                     span(2,8),
                     span(1,8)
    background-position: span(0,0),
                         span(2,0),
                         span(3,0),
                         span(3,3),
                         span(3,4),
                         span(3,5),
                         span(5,0),
                         span(7,0)
                           
  &.x
    background-image: full($blue),
                      blue(left),
                      blue(right),
                      blue(left),
                      blue(right),
                      blue(left),
                      full($blue),
                      blue-light(left),
                      full($blue-light),
                      green(left),
                      green(right),
                      green(left),
                      green(right),
                      full($shadow),
                      full($shadow),
                      full($shadow)
    background-size: span(2,1),
                     span(3,1),
                     span(3,1),
                     span(3,1),
                     span(3,1),
                     span(2,1),
                     span(3,1),
                     span(3,1),
                     span(2,1),
                     span(3,1),
                     span(3,1),
                     span(2,1),
                     span(2,1),
                     span(1,1),
                     span(1,1),
                     span(2,1)
    background-position: span(0,0),
                         span(5,0),
                         span(0,1),
                         span(4,1),
                         span(1,2),
                         span(4,2),
                         span(2,3),
                         span(1,4),
                         span(4,4),
                         span(0,5),
                         span(4,5),
                         span(0,6),
                         span(5,6),
                         span(0,7),
                         span(7,6),
                         span(6,7)
                           
  &.y
    background-image: blue(left),
                      blue(left),
                      blue(left),
                      blue(left),
                      blue(left),
                      blue(left),
                      $green-double,
                      full($shadow)
    background-size: span(2,1),
                     span(2,1),
                     span(3,1),
                     span(3,1),
                     span(3,1),
                     span(3,1),
                     span(3,5),
                     span(1,5)
    background-position: span(0,0),
                         span(6,0),
                         span(0,1),
                         span(5,1),
                         span(1,2),
                         span(4,2),
                         span(2,3),
                         span(5,3)
                           
  &.z
    background-image: blue(left),
                      full($shadow),
                      blue(left),
                      blue(left),
                      blue(left),
                      blue-light(left),
                      blue(left),
                      green(left),
                      green(left),
                      full($shadow)
    background-size: span(8,1),
                     span(4,1),
                     span(3,1),
                     span(4,1),
                     span(3,1),
                     span(3,1),
                     span(2,1),
                     span(3,1),
                     span(8,1),
                     span(8,1)
    background-position: span(0,0),
                         span(0,1),
                         span(4,1),
                         span(2,2),
                         span(2,3),
                         span(1,4),
                         span(4,4),
                         span(0,5),
                         span(0,6),
                         span(0,7)
                           
  &.one
    background-image: full($blue),
                      green(top),
                      $green-double,
                      full($shadow),
                      green(top),
                      full($shadow)
    background-size: span(1,1),
                     span(1,2),
                     span(3,8),
                     span(1,6),
                     span(1,2),
                     span(1,2)
    background-position: span(1,1),
                         span(1,6),
                         span(2,0),
                         span(5,0),
                         span(5,6),
                         span(6,6)
                           
  &.two
    background-image: blue(left),
                      blue(top),
                      full($shadow),
                      full($shadow),
                      blue(left),
                      blue(left),
                      blue-light(left),
                      halfsies($green,$shadow,right),
                      green(left),
                      full($shadow)
    background-size: span(6,1),
                     span(3,3),
                     span(1,3),
                     span(1,1),
                     span(3,2),
                     span(3,1),
                     span(4,1),
                     span(4,1),
                     span(8,1),
                     span(8,1)
    background-position: span(1,0),
                         span(0,1),
                         span(3,1),
                         span(4,1),
                         span(5,1),
                         span(4,3),
                         span(2,4),
                         span(1,5),
                         span(0,6),
                         span(0,7)
                           
  &.three
    background-image: blue(left),
                      blue(top),
                      full($shadow),
                      full($shadow),
                      blue(left),
                      blue(left),
                      blue-light(right),
                      full($shadow),
                      green(left),
                      green(left),
                      green(top),
                      full($shadow)
    background-size: span(6,1),
                     span(3,3),
                     span(1,3),
                     span(1,1),
                     span(3,2),
                     span(3,1),
                     span(3,1),
                     span(1,1),
                     span(4,1),
                     span(3,1),
                     span(6,2),
                     span(8,1)
    background-position: span(1,0),
                         span(0,1),
                         span(3,1),
                         span(4,1),
                         span(5,1),
                         span(4,3),
                         span(4,4),
                         span(7,4),
                         span(0,5),
                         span(5,5),
                         span(1,6),
                         span(0,6)
                           
  &.four
    background-image: blue(top),
                      blue(top),
                      full($blue),
                      full($blue-light),
                      $green-double,
                      green(left),
                      full($shadow),
                      full($shadow)
    background-size: span(1,3),
                     span(1,3),
                     span(1,1),
                     span(2,1),
                     span(2,8),
                     span(8,1),
                     span(8,1),
                     span(1,8)
    background-position: span(3,1),
                         span(2,2),
                         span(1,3),
                         span(0,4),
                         span(4,0),
                         span(0,5),
                         span(0,6),
                         span(6,0)
                           
  &.five
    background-image: blue(left),
                      blue(left),
                      full($shadow),
                      blue(left),
                      full($blue-light),
                      full($shadow),
                      green(left),
                      green(left),
                      full($shadow)
    background-size: span(8,1),
                     span(4,2),
                     span(8,1),
                     span(7,1),
                     span(2,1),
                     span(8,1),
                     span(3,1),
                     span(7,1),
                     span(6,1)
    background-position: span(0,0),
                         span(0,1),
                         span(0,1),
                         span(0,3),
                         span(5,4),
                         span(0,4),
                         span(5,5),
                         span(0,6),
                         span(0,7)
                           
  &.six
    background-image: $green-single,
                      $green-double,
                      blue(left),
                      full($shadow),
                      blue(left),
                      full($shadow),
                      blue(left),
                      full($shadow),
                      blue-light(left),
                      green(left),
                      green(left),
                      full($shadow),
                      full($shadow)
    background-size: span(1,6),
                     span(2,8),
                     span(4,1),
                     span(1,1),
                     span(3,1),
                     span(3,1),
                     span(4,1),
                     span(1,1),
                     span(3,1),
                     span(3,1),
                     span(4,1),
                     span(1,8),
                     span(3,1)
    background-position: span(0,1),
                         span(1,0),
                         span(3,0),
                         span(4,1),
                         span(5,1),
                         span(5,2),
                         span(3,3),
                         span(4,4),
                         span(5,4),
                         span(5,5),
                         span(3,6),
                         span(3,0),
                         span(4,7)
                           
  &.seven
    background-image: blue(top),
                      blue(top),
                      blue(left),
                      blue(left),
                      blue-light(left),
                      green(left),
                      full($shadow)
    background-size: span(2,2),
                     span(4,3),
                     span(3,3),
                     span(3,1),
                     span(3,1),
                     span(3,2),
                     span(3,1)
    background-position: span(3,0),
                         span(0,0),
                         span(5,0),
                         span(4,3),
                         span(3,4),
                         span(2,5),
                         span(2,7)
                           
  &.eight
    background-image: blue(left),
                      blue(left),
                      full($shadow),
                      blue(left),
                      blue(left),
                      blue-light(left),
                      full($shadow),
                      blue-light(left),
                      green(left),
                      green(left),
                      green(top),
                      full($shadow)
    background-size: span(6,1),
                     span(4,2),
                     span(1,1),
                     span(3,2),
                     span(6,1),
                     span(4,1),
                     span(1,1),
                     span(3,1),
                     span(4,1),
                     span(3,1),
                     span(5,2),
                     span(7,1)
    background-position: span(1,0),
                         span(0,1),
                         span(4,1),
                         span(5,1),
                         span(1,3),
                         span(0,4),
                         span(4,4),
                         span(5,4),
                         span(0,5),
                         span(5,5),
                         span(1,6),
                         span(0,6)
                           
  &.nine
    background-image: blue(left),
                      blue(left),
                      full($shadow),
                      blue(left),
                      blue(right),
                      full($shadow),
                      blue(left),
                      green(left),
                      green(left),
                      full($shadow)
    background-size: span(6,1),
                     span(4,2),
                     span(1,1),
                     span(3,3),
                     span(5,1),
                     span(4,1),
                     span(3,1),
                     span(3,1),
                     span(6,1),
                     span(5,1)
    background-position: span(1,0),
                         span(0,1),
                         span(4,1),
                         span(5,1),
                         span(0,3),
                         span(1,4),
                         span(5,4),
                         span(5,5),
                         span(1,6),
                         span(1,7)
              
            
!

JS

              
                
              
            
!
999px

Console