(S)CSS-Only Barcode
by Scott Kaye
HTML
<div class="barcode-regular"></div>
<div class="barcode-coloured"></div>
<div class="barcode-text"></div>
<div class="barcode-gradient"></div>
<div class="barcode-image"></div>
<section class="thing"></section>SCSS
$map: (
'\0020': '11011001100', // space
'\0021': '11001101100', // !
'\0022': '11001100110', // "
'\0023': '10010011000', // #
'\0024': '10010001100', // $
'\0025': '10001001100', // %
'\0026': '10011001000', // &
'\0027': '10011000100', // '
'\0028': '10001100100', // (
'\0029': '11001001000', // )
'\002a': '11001000100', // *
'\002b': '11000100100', // +
'\002c': '10110011100', // ,
'\002d': '10011011100', // -
'\002e': '10011001110', // .
'\002f': '10111001100', // /
'\0030': '10011101100', // 0
'\0031': '10011100110', // 1
'\0032': '11001110010', // 2
'\0033': '11001011100', // 3
'\0034': '11001001110', // 4
'\0035': '11011100100', // 5
'\0036': '11001110100', // 6
'\0037': '11101101110', // 7
'\0038': '11101001100', // 8
'\0039': '11100101100', // 9
'\003a': '11100100110', // :
'\003b': '11101100100', // ;
'\003c': '11100110100', // <
'\003d': '11100110010', // =
'\003e': '11011011000', // >
'\003f': '11011000110', // ?
'\0040': '11000110110', // @
'\0041': '10100011000', // A
'\0042': '10001011000', // B
'\0043': '10001000110', // C
'\0044': '10110001000', // D
'\0045': '10001101000', // E
'\0046': '10001100010', // F
'\0047': '11010001000', // G
'\0048': '11000101000', // H
'\0049': '11000100010', // I
'\004a': '10110111000', // J
'\004b': '10110001110', // K
'\004c': '10001101110', // L
'\004d': '10111011000', // M
'\004e': '10111000110', // N
'\004f': '10001110110', // O
'\0050': '11101110110', // P
'\0051': '11010001110', // Q
'\0052': '11000101110', // R
'\0053': '11011101000', // S
'\0054': '11011100010', // T
'\0055': '11011101110', // U
'\0056': '11101011000', // V
'\0057': '11101000110', // W
'\0058': '11100010110', // X
'\0059': '11101101000', // Y
'\005a': '11101100010', // Z
'\005b': '11100011010', // [
'\005c': '11101111010', // \
'\005d': '11001000010', // ]
'\005e': '11110001010', // ^
'\005f': '10100110000', //...