CodePen Embed - CSSPixelFont

header.header
  h4
    span.letter.letter--C
    span.letter.letter--S
    span.letter.letter--S
    span.letter.letter--P
    span.letter.letter--i
    span.letter.letter--x    
    span.letter.letter--e
    span.letter.letter--l
    span.letter.letter--F
    span.letter.letter--o
    span.letter.letter--n
    span.letter.letter--t
    span.letter.letter--mark-exclamation

main.container
  span.letter.letter--A
  span.letter.letter--B
  span.letter.letter--C
  span.letter.letter--D
  span.letter.letter--E
  span.letter.letter--F
  span.letter.letter--G
  span.letter.letter--H
  span.letter.letter--I
  span.letter.letter--J
  span.letter.letter--K
  span.letter.letter--L
  span.letter.letter--M
  span.letter.letter--N
  span.letter.letter--O
  span.letter.letter--P
  span.letter.letter--Q
  span.letter.letter--R
  span.letter.letter--S
  span.letter.letter--T
  span.letter.letter--U
  span.letter.letter--V
  span.letter.letter--W
  span.letter.letter--X
  span.letter.letter--Y
  span.letter.letter--Z
  br
  br
  span.letter.letter--a
  span.letter.letter--b
  span.letter.letter--c
  span.letter.letter--d
  span.letter.letter--e
  span.letter.letter--f
  span.letter.letter--g
  span.letter.letter--h
  span.letter.letter--i
  span.letter.letter--j
  span.letter.letter--k
  span.letter.letter--l
  span.letter.letter--m
  span.letter.letter--n
  span.letter.letter--o
  span.letter.letter--p
  span.letter.letter--q
  span.letter.letter--r
  span.letter.letter--s
  span.letter.letter--t
  span.letter.letter--u
  span.letter.letter--v
  span.letter.letter--w
  span.letter.letter--x
  span.letter.letter--y
  span.letter.letter--z
  br
  br
  span.letter.letter--0
  span.letter.letter--1
  span.letter.letter--2
  span.letter.letter--3
  span.letter.letter--4
  span.letter.letter--5
  span.letter.letter--6
  span.letter.letter--7
  span.letter.letter--8
  span.letter.letter--9
  span.letter.letter--dot
  span.letter.letter--colon
  span.letter.letter--comma
  span.letter.letter--semicolon
  span.letter.letter--prime
  span.letter.letter--prime-double
  span.letter.letter--brackets-open
  span.letter.letter--brackets-close
  span.letter.letter--mark-exclamation
  span.letter.letter--mark-question
  span.letter.letter--minus
  span.letter.letter--plus
  span.letter.letter--asterisk
  span.letter.letter--slash
  span.letter.letter--equal

footer.footer
  h4
    span.letter.letter--C
    span.letter.letter--o
    span.letter.letter--d
    span.letter.letter--e
    span.letter.letter--p
    span.letter.letter--e
    span.letter.letter--n

View Compiled

w(_size)
  if typeof (_size) == 'unit'
    if typeof (_size) == 'rem'
        width (_size*16)px
        min-width (_size*16)px
        max-width (_size*16)px
  width _size
  min-width _size
  max-width _size

h(_size)
  if typeof (_size) == 'unit'
    if typeof (_size) == 'rem'
        height (_size*16)px
        min-height (_size*16)px
        max-height (_size*16)px
  height _size
  min-height _size
  max-height _size

/* **************
   Quick Reset
************** */
html
  box-sizing border-box
html
body
  margin 0
  padding 0
  height 100%
  overflow hidden
body
  background #fff
  display flex
  justify-content center
  align-items center
  flex-flow column nowrap
*
*:before
*:after
  box-sizing inherit

/* **************
   Variables
************** */
// Width & Height
basys = .6rem;

// Colors
color = #2F3E46;

/* **************
   Style
************** */
.header
.footer
  background-color #84A98C
  color #5C7662
  width 100%
  height 60px
  display flex
  justify-content center
  align-items center
  overflow hidden
  & h4
    padding 0
    margin 0
    height 100%
  & .letter
    border none
    transform scale(.3)
    margin 0

.container
  height calc(100% - 120px)
  overflow auto
  background-color #CAD2C5
  
.letter
  w 4rem
  h 4rem
  display inline-block
  margin 4px
  padding 0
  position relative
  border 1px solid #000
  &:hover
    &:after
      color #52796F
  &:after
    content ''
    position absolute
    top 0
    left 0
    width 0
    height 0
    margin 0
    color color
  &--space
    width basys
    min-width basys
    max-width basys
  &--A:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--B:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--C:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--D:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--E:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--F:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor;


  &--G:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--H:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--I:after
    box-shadow (basys*3) (basys*1) 0 (basys/2) currentColor,

               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*3) (basys*3) 0 (basys/2) currentColor,

               (basys*3) (basys*4) 0 (basys/2) currentColor,

               (basys*3) (basys*5) 0 (basys/2) currentColor;


  &--J:after
    box-shadow (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor;


  &--K:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--L:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--M:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--N:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--O:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--P:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor;


  &--Q:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor,

               (basys*5) (basys*6) 0 (basys/2) currentColor;


  &--R:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--S:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,

               (basys*2) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--T:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*3) (basys*3) 0 (basys/2) currentColor,

               (basys*3) (basys*4) 0 (basys/2) currentColor,

               (basys*3) (basys*5) 0 (basys/2) currentColor;


  &--U:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--V:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*2) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*3) (basys*5) 0 (basys/2) currentColor;


  &--W:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*3) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--X:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*3) (basys*3) 0 (basys/2) currentColor,

               (basys*2) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--Y:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*3) (basys*3) 0 (basys/2) currentColor,

               (basys*3) (basys*4) 0 (basys/2) currentColor,

               (basys*3) (basys*5) 0 (basys/2) currentColor;


  &--Z:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,
               (basys*2) (basys*1) 0 (basys/2) currentColor,
               (basys*3) (basys*1) 0 (basys/2) currentColor,
               (basys*4) (basys*1) 0 (basys/2) currentColor,
               (basys*5) (basys*1) 0 (basys/2) currentColor,

               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*3) (basys*3) 0 (basys/2) currentColor,

               (basys*2) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--a:after
    box-shadow (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--b:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor;


  &--c:after
    box-shadow (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--d:after
    box-shadow (basys*4) (basys*1) 0 (basys/2) currentColor,

               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--e:after
    box-shadow (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*3) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--f:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor;


  &--g:after
    box-shadow (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor,

               (basys*4) (basys*6) 0 (basys/2) currentColor,

               (basys*2) (basys*7) 0 (basys/2) currentColor,
               (basys*3) (basys*7) 0 (basys/2) currentColor;


  &--h:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--i:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,

               (basys*2) (basys*3) 0 (basys/2) currentColor,

               (basys*2) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor;


  &--j:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,

               (basys*2) (basys*3) 0 (basys/2) currentColor,

               (basys*2) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,

               (basys*1) (basys*6) 0 (basys/2) currentColor;


  &--k:after
    box-shadow (basys*1) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*2) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--l:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,

               (basys*2) (basys*2) 0 (basys/2) currentColor,

               (basys*2) (basys*3) 0 (basys/2) currentColor,

               (basys*2) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor;


  &--m:after
    box-shadow (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,
               (basys*5) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*3) (basys*3) 0 (basys/2) currentColor,
               (basys*5) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*3) (basys*4) 0 (basys/2) currentColor,
               (basys*5) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*5) (basys*5) 0 (basys/2) currentColor;


  &--n:after
    box-shadow (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--o:after
    box-shadow (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor;


  &--p:after
    box-shadow (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,

               (basys*1) (basys*6) 0 (basys/2) currentColor,

               (basys*1) (basys*7) 0 (basys/2) currentColor;


  &--q:after
    box-shadow (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor,

               (basys*4) (basys*6) 0 (basys/2) currentColor,

               (basys*4) (basys*7) 0 (basys/2) currentColor;


  &--r:after
    box-shadow (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor;


  &--s:after
    box-shadow (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*2) (basys*3) 0 (basys/2) currentColor,

               (basys*3) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*1) (basys*5) 0 (basys/2) currentColor,
               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor;


  &--t:after
    box-shadow (basys*2) (basys*1) 0 (basys/2) currentColor,

               (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*2) (basys*2) 0 (basys/2) currentColor,
               (basys*3) (basys*2) 0 (basys/2) currentColor,

               (basys*2) (basys*3) 0 (basys/2) currentColor,

               (basys*2) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor;


  &--u:after
    box-shadow (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (basys*4) (basys*4) 0 (basys/2) currentColor,

               (basys*2) (basys*5) 0 (basys/2) currentColor,
               (basys*3) (basys*5) 0 (basys/2) currentColor,
               (basys*4) (basys*5) 0 (basys/2) currentColor;


  &--v:after
    box-shadow (basys*1) (basys*2) 0 (basys/2) currentColor,
               (basys*4) (basys*2) 0 (basys/2) currentColor,

               (basys*1) (basys*3) 0 (basys/2) currentColor,
               (basys*4) (basys*3) 0 (basys/2) currentColor,

               (basys*1) (basys*4) 0 (basys/2) currentColor,
               (b

View Compiled

/*
  CSSPixelFont - Pure css font. Just box-shadow magic!
*/

Run Pen

This Pen is owned by DonSinDRom on CodePen.

See more by @DonSinDRom on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.