Счастливого Рождества, 8 битный Санта на CSS

Красота старинной 8-битной графики вдохновила Энрике Родригеса на создание современного, упрощенного Санты. Его проект «Счастливого Рождества» обладает мощной цифровой атмосферой, которая прекрасно сочетается с нашей компьютеризированной эпохой и онлайн-поздравлениями.

HTML

<div class="pixel"></div>

CSS

body{
  background-color: #56bc66;
}
.pixel{
  width: 410px;
  height: 250px;
  position: absolute;
  top: calc(50% - 125px);
  left: calc(50% - 205px);
}
.pixel:before{
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0px;
  left: 50px;
  background-color: #b93600;
  box-shadow: 10px 0 #b93600,
    /*NOEL*/
    20px 0 #b93600,
    -10px 10px #b93600,
    0px 10px #b93600,
    10px 10px #b93600,
    20px 10px #b93600,
    30px 10px #b93600,
    -20px 20px #FFFFFF,
    -10px 20px #FFFFFF,
    10px 20px #b93600,
    20px 20px #b93600,
    30px 20px #b93600,
    40px 20px #b93600,
    -20px 30px #FFFFFF,
    -10px 30px #FFFFFF,
    10px 30px #b93600,
    20px 30px #b93600,
    30px 30px #b93600,
    40px 30px #b93600,
    0px 40px #b93600,
    10px 40px #b93600,
    20px 40px #b93600,
    30px 40px #b93600,
    40px 40px #b93600,
    50px 40px #b93600,
    -10px 50px #b93600,
    0px 50px #b93600,
    10px 50px #b93600,
    20px 50px #b93600,
    30px 50px #b93600,
    40px 50px #b93600,
    50px 50px #b93600,
    60px 50px #b93600,
    -20px 60px #FFFFFF,
    -10px 60px #FFFFFF,
    0px 60px #FFFFFF,
    10px 60px #FFFFFF,
    20px 60px #FFFFFF,
    30px 60px #FFFFFF,
    40px 60px #FFFFFF,
    50px 60px #FFFFFF,
    60px 60px #FFFFFF,
    70px 60px #FFFFFF,
    -10px 70px #FFFFFF,
    0px 70px #fdc9a1,
    10px 70px #fdc9a1,
    20px 70px #fdc9a1,
    30px 70px #fdc9a1,
    40px 70px #fdc9a1,
    50px 70px #fdc9a1,
    60px 70px #FFFFFF,
    -10px 80px #FFFFFF,
    0px 80px #fdc9a1,
    10px 80px #000000,
    20px 80px #fdc9a1,
    30px 80px #fdc9a1,
    40px 80px #000000,
    50px 80px #fdc9a1,
    60px 80px #FFFFFF,
    -10px 90px #FFFFFF,
    0px 90px #fdc9a1,
    10px 90px #fdc9a1,
    20px 90px #fdc9a1,
    30px 90px #fdc9a1,
    40px 90px #fdc9a1,
    50px 90px #fdc9a1,
    60px 90px #FFFFFF,
    -50px 100px #FFFFFF,
    -40px 100px #FFFFFF,
    -10px 100px #FFFFFF,
    0px 100px #fdc9a1,
    10px 100px #FFFFFF,
    20px 100px #FFFFFF,
    30px 100px #FFFFFF,
    40px 100px #FFFFFF,
    50px 100px #fdc9a1,
    60px 100px #FFFFFF,
    90px 100px #FFFFFF,
    100px 100px #FFFFFF,
    -10px 110px #FFFFFF,
    -50px 110px #FFFFFF,
    -40px 110px #FFFFFF,
    0px 110px #FFFFFF,
    10px 110px #FFFFFF,
    20px 110px #fa6b44,
    30px 110px #fa6b44,
    40px 110px #FFFFFF,
    50px 110px #FFFFFF,
    60px 110px #FFFFFF,
    90px 110px #FFFFFF,
    100px 110px #FFFFFF,
    -40px 120px #b93600,
    -30px 120px #b93600,
    0px 120px #FFFFFF,
    10px 120px #FFFFFF,
    20px 120px #FFFFFF,
    30px 120px #FFFFFF,
    40px 120px #FFFFFF,
    50px 120px #FFFFFF,
    80px 120px #b93600,
    90px 120px #b93600,
    -40px 130px #b93600,
    -30px 130px #b93600,
    -20px 130px #b93600,
    -10px 130px #b93600,
    0px 130px #b93600,
    10px 130px #FFFFFF,
    20px 130px #FFFFFF,
    30px 130px #FFFFFF,
    40px 130px #FFFFFF,
    50px 130px #b93600,
    60px 130px #b93600,
    70px 130px #b93600,
    80px 130px #b93600,
    90px 130px #b93600,
    -30px 140px #b93600,
    -20px 140px #b93600,
    -10px 140px #b93600,
    0px 140px #b93600,
    10px 140px #b93600,
    20px 140px #b93600,
    30px 140px #b93600,
    40px 140px #b93600,
    50px 140px #b93600,
    60px 140px #b93600,
    70px 140px #b93600,
    80px 140px #b93600,
    -20px 150px #b93600,
    -10px 150px #b93600,
    0px 150px #b93600,
    10px 150px #b93600,
    20px 150px #b93600,
    30px 150px #b93600,
    40px 150px #b93600,
    50px 150px #b93600,
    60px 150px #b93600,
    70px 150px #b93600,
    -10px 160px #b93600,
    0px 160px #b93600,
    10px 160px #b93600,
    20px 160px #b93600,
    30px 160px #b93600,
    40px 160px #b93600,
    50px 160px #b93600,
    60px 160px #b93600, 
    -10px 170px #5c2800,
    0px 170px #5c2800,
    10px 170px #5c2800,
    20px 170px #fcb71a,
    30px 170px #fcb71a,
    40px 170px #5c2800,
    50px 170px #5c2800,
    60px 170px #5c2800,
    -10px 180px #b93600,
    0px 180px #b93600,
    10px 180px #b93600,
    20px 180px #b93600,
    30px 180px #b93600,
    40px 180px #b93600,
    50px 180px #b93600,
    60px 180px #b93600,
    -10px 190px #b93600,
    0px 190px #b93600,
    10px 190px #b93600,
    20px 190px #b93600,
    30px 190px #b93600,
    40px 190px #b93600,
    50px 190px #b93600,
    60px 190px #b93600,
    0px 200px #b93600,
    10px 200px #b93600,
    40px 200px #b93600,
    50px 200px #b93600,
    0px 210px #b93600,
    10px 210px #b93600,
    40px 210px #b93600,
    50px 210px #b93600,
    0px 220px #000000,
    10px 220px #000000,
    40px 220px #000000,
    50px 220px #000000,
    -10px 230px #000000,
    0px 230px #000000,
    10px 230px #000000,
    40px 230px #000000,
    50px 230px #000000,
    60px 230px #000000,
    -10px 240px #000000,
    0px 240px #000000,
    10px 240px #000000,
    40px 240px #000000,
    50px 240px #000000,
    60px 240px #000000,
    /*PRESENT 1*/
    120px 240px #000000,
    130px 240px #000000,
    140px 240px #000000,
    150px 240px #000000,
    160px 240px #000000,
    170px 240px #000000,
    180px 240px #000000,
    190px 240px #000000,
    200px 240px #000000,
    120px 230px #000000,
    130px 230px #2c5aa9,
    140px 230px #2c5aa9,
    150px 230px #000000,
    160px 230px #fdd929,
    170px 230px #000000,
    180px 230px #2c5aa9,
    190px 230px #2c5aa9,
    200px 230px #000000,
    120px 220px #000000,
    130px 220px #2c5aa9,
    140px 220px #2c5aa9,
    150px 220px #000000,
    160px 220px #fdd929,
    170px 220px #000000,
    180px 220px #2c5aa9,
    190px 220px #2c5aa9,
    200px 220px #000000,    
    120px 210px #000000,
    130px 210px #2c5aa9,
    140px 210px #2c5aa9,
    150px 210px #000000,
    160px 210px #fdd929,
    170px 210px #000000,
    180px 210px #2c5aa9,
    190px 210px #2c5aa9,
    200px 210px #000000,    
    120px 200px #000000,
    130px 200px #2c5aa9,
    140px 200px #2c5aa9,
    150px 200px #000000,
    160px 200px #fdd929,
    170px 200px #000000,
    180px 200px #2c5aa9,
    190px 200px #2c5aa9,
    200px 200px #000000,    
    120px 190px #000000,
    130px 190px #000000,
    140px 190px #000000,
    150px 190px #000000,
    160px 190px #000000,
    170px 190px #000000,
    180px 190px #000000,
    190px 190px #000000,
    200px 190px #000000,
    130px 180px #000000,
    140px 180px #fdd929,
    150px 180px #000000,
    160px 180px #fdd929,
    170px 180px #000000,
    180px 180px #fdd929,
    190px 180px #000000,    
    130px 170px #000000,
    140px 170px #fdd929,
    150px 170px #000000,
    160px 170px #000000,
    170px 170px #000000,
    180px 170px #fdd929,
    190px 170px #000000,
    140px 160px #000000,
    180px 160px #000000,
    /*PRESENT 2*/
    230px 240px #000000,
    240px 240px #000000,
    250px 240px #000000,
    260px 240px #000000,
    270px 240px #000000,
    280px 240px #000000,
    290px 240px #000000,
    300px 240px #000000,
    310px 240px #000000,
    230px 230px #000000,
    240px 230px #cc5ea5,
    250px 230px #cc5ea5,
    260px 230px #000000,
    270px 230px #56bc66,
    280px 230px #000000,
    290px 230px #cc5ea5,
    300px 230px #cc5ea5,
    310px 230px #000000,
    230px 220px #000000,
    240px 220px #cc5ea5,
    250px 220px #cc5ea5,
    260px 220px #000000,
    270px 220px #56bc66,
    280px 220px #000000,
    290px 220px #cc5ea5,
    300px 220px #cc5ea5,
    310px 220px #000000,    
    230px 210px #000000,
    240px 210px #cc5ea5,
    250px 210px #cc5ea5,
    260px 210px #000000,
    270px 210px #56bc66,
    280px 210px #000000,
    290px 210px #cc5ea5,
    300px 210px #cc5ea5,
    310px 210px #000000,    
    230px 200px #000000,
    240px 200px #cc5ea5,
    250px 200px #cc5ea5,
    260px 200px #000000,
    270px 200px #56bc66,
    280px 200px #000000,
    290px 200px #cc5ea5,
    300px 200px #cc5ea5,
    310px 200px #000000,    
    230px 190px #000000,
    240px 190px #000000,
    250px 190px #000000,
    260px 190px #000000,
    270px 190px #000000,
    280px 190px #000000,
    290px 190px #000000,
    300px 190px #000000,
    310px 190px #000000,
    240px 180px #000000,
    250px 180px #56bc66,
    260px 180px #000000,
    270px 180px #56bc66,
    280px 180px #000000,
    290px 180px #56bc66,
    300px 180px #000000,    
    240px 170px #000000,
    250px 170px #56bc66,
    260px 170px #000000,
    270px 170px #000000,
    280px 170px #000000,
    290px 170px #56bc66,
    300px 170px #000000,
    250px 160px #000000,
    290px 160px #000000
}
.pixel:after{
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  top: 95px;
  left: 170px;
  background-color: #b93600;
  box-shadow: 5px 0 #b93600,
    /*CHRISTMAS*/
    /*C*/
    10px 0 #b93600,
    -5px -5px #b93600,
    0px -5px #b93600,
    5px -5px #b93600,
    10px -5px #b93600,
    15px -5px #b93600,    
    -5px -10px #b93600,
    0px -10px #b93600,
    10px -10px #b93600,
    15px -10px #b93600,
    -10px -15px #b93600,
    -5px -15px #b93600,
    -10px -20px #b93600,
    -5px -20px #b93600,
    -5px -25px #b93600,
    0px -25px #b93600,
    10px -25px #b93600,
    15px -25px #b93600,    
    -5px -30px #b93600,
    0px -30px #b93600,
    5px -30px #b93600,
    10px -30px #b93600,
    15px -30px #b93600,    
    0px -35px #b93600,
    5px -35px #b93600,
    10px -35px #b93600,
    /*H*/
    25px 0px #b93600,
    30px 0px #b93600,
    40px 0px #b93600,
    45px 0px #b93600,    
    25px -5px #b93600,
    30px -5px #b93600,
    40px -5px #b93600,
    45px -5px #b93600,    
    25px -10px #b93600,
    30px -10px #b93600,
    40px -10px #b93600,
    45px -10px #b93600,    
    25px -15px #b93600,
    30px -15px #b93600,
    35px -15px #b93600,
    40px -15px #b93600,
    45px -15px #b93600,    
    25px -20px #b93600,
    30px -20px #b93600,
    35px -20px #b93600,
    40px -20px #b93600,
    45px -20px #b93600,    
    25px -25px #b93600,
    30px -25px #b93600,
    40px -25px #b93600,
    45px -25px #b93600,    
    25px -30px #b93600,
    30px -30px #b93600,
    40px -30px #b93600,
    45px -30px #b93600,    
    25px -35px #b93600,
    30px -35px #b93600,
    40px -35px #b93600,
    45px -35px #b93600,
    /*R*/
    55px 0 #b93600,
    60px 0 #b93600,
    70px 0 #b93600,
    75px 0 #b93600,    
    55px 0 #b93600,
    60px 0 #b93600,
    70px 0 #b93600,
    75px 0 #b93600,    
    55px -5px #b93600,
    60px -5px #b93600,
    70px -5px #b93600,
    75px -5px #b93600,    
    55px -10px #b93600,
    60px -10px #b93600,
    65px -10px #b93600,
    70px -10px #b93600,    
    55px -15px #b93600,
    60px -15px #b93600,
    65px -15px #b93600,    
    55px -20px #b93600,
    60px -20px #b93600,
    65px -20px #b93600,
    70px -20px #b93600,    
    55px -25px #b93600,
    60px -25px #b93600,
    70px -25px #b93600,
    75px -25px #b93600,    
    55px -30px #b93600,
    60px -30px #b93600,
    70px -30px #b93600,
    75px -30px #b93600,    
    55px -35px #b93600,
    60px -35px #b93600,
    65px -35px #b93600,
    70px -35px #b93600,
    /*I*/
    85px 0px #b93600,
    90px 0px #b93600,
    85px -5px #b93600,
    90px -5px #b93600,
    85px -10px #b93600,
    90px -10px #b93600,
    85px -15px #b93600,
    90px -15px #b93600,
    85px -20px #b93600,
    90px -20px #b93600,
    85px -25px #b93600,
    90px -25px #b93600,
    85px -30px #b93600,
    90px -30px #b93600,
    85px -35px #b93600,
    90px -35px #b93600,
    /*s*/
    105px 0px #b93600,
    110px 0px #b93600,
    100px -5px #b93600,
    105px -5px #b93600,
    110px -5px #b93600,
    115px -5px #b93600,
    100px -10px #b93600,
    115px -10px #b93600,
    115px -15px #b93600,
    110px -15px #b93600,
    110px -20px #b93600,
    105px -20px #b93600,
    100px -20px #b93600,
    100px -25px #b93600,
    100px -30px #b93600,
    105px -30px #b93600,
    110px -30px #b93600,
    115px -30px #b93600,
    105px -35px #b93600,
    110px -35px #b93600,
    /*T*/
    130px 0px #b93600,
    135px 0px #b93600,
    130px -5px #b93600,
    135px -5px #b93600,
    130px -10px #b93600,
    135px -10px #b93600,
    130px -15px #b93600,
    135px -15px #b93600,
    130px -20px #b93600,
    135px -20px #b93600,
    130px -25px #b93600,
    135px -25px #b93600,
    125px -30px #b93600,
    130px -30px #b93600,
    135px -30px #b93600,
    140px -30px #b93600,
    125px -35px #b93600,
    130px -35px #b93600,
    135px -35px #b93600,
    140px -35px #b93600,
    /*M*/
    150px 0px #b93600,
    155px 0px #b93600,
    175px 0px #b93600,
    180px 0px #b93600,
    150px -5px #b93600,
    155px -5px #b93600,
    175px -5px #b93600,
    180px -5px #b93600,
    150px -10px #b93600,
    155px -10px #b93600,
    175px -10px #b93600,
    180px -10px #b93600,
    150px -15px #b93600,
    155px -15px #b93600,
    175px -15px #b93600,
    180px -15px #b93600,
    150px -20px #b93600,
    155px -20px #b93600,
    165px -20px #b93600,
    175px -20px #b93600,
    180px -20px #b93600,
    150px -25px #b93600,
    155px -25px #b93600,
    160px -25px #b93600,
    165px -25px #b93600,
    170px -25px #b93600,
    175px -25px #b93600,
    180px -25px #b93600,
    150px -30px #b93600,
    155px -30px #b93600,
    160px -30px #b93600,
    170px -30px #b93600,
    175px -30px #b93600,
    180px -30px #b93600,
    150px -35px #b93600,
    155px -35px #b93600,
    175px -35px #b93600,
    180px -35px #b93600,
    /*A*/
    190px 0px #b93600,
    195px 0px #b93600,
    205px 0px #b93600,
    210px 0px #b93600,    
    190px -5px #b93600,
    195px -5px #b93600,
    200px -5px #b93600,
    205px -5px #b93600,
    210px -5px #b93600,    
    190px -10px #b93600,
    195px -10px #b93600,
    200px -10px #b93600,
    205px -10px #b93600,
    210px -10px #b93600,    
    190px -15px #b93600,
    195px -15px #b93600,
    205px -15px #b93600,
    210px -15px #b93600,    
    190px -20px #b93600,
    195px -20px #b93600,
    205px -20px #b93600,
    210px -20px #b93600,    
    190px -25px #b93600,
    195px -25px #b93600,
    200px -25px #b93600,
    205px -25px #b93600,
    210px -25px #b93600,    
    195px -30px #b93600,
    200px -30px #b93600,
    205px -30px #b93600,    
    200px -35px #b93600,
    /*S*/
    225px 0px #b93600,
    230px 0px #b93600,
    220px -5px #b93600,
    225px -5px #b93600,
    230px -5px #b93600,
    235px -5px #b93600,
    220px -10px #b93600,
    235px -10px #b93600,
    235px -15px #b93600,
    230px -15px #b93600,
    230px -20px #b93600,
    225px -20px #b93600,
    220px -20px #b93600,
    220px -25px #b93600,
    220px -30px #b93600,
    225px -30px #b93600,
    230px -30px #b93600,
    235px -30px #b93600,
    225px -35px #b93600,
    230px -35px #b93600,
    /*MERRY*/
    /*M*/    
    40px -45px #f0f526,
    45px -45px #f0f526,
    65px -45px #f0f526,
    70px -45px #f0f526,
    40px -50px #f0f526,
    45px -50px #f0f526,
    65px -50px #f0f526,
    70px -50px #f0f526,
    40px -55px #f0f526,
    45px -55px #f0f526,
    65px -55px #f0f526,
    70px -55px #f0f526,
    40px -60px #f0f526,
    45px -60px #f0f526,
    65px -60px #f0f526,
    70px -60px #f0f526,
    40px -65px #f0f526,
    45px -65px #f0f526,
    55px -65px #f0f526,
    65px -65px #f0f526,
    70px -65px #f0f526,
    40px -70px #f0f526,
    45px -70px #f0f526,
    50px -70px #f0f526,
    55px -70px #f0f526,
    60px -70px #f0f526,
    65px -70px #f0f526,
    70px -70px #f0f526,
    40px -75px #f0f526,
    45px -75px #f0f526,
    50px -75px #f0f526,
    60px -75px #f0f526,
    65px -75px #f0f526,
    70px -75px #f0f526,
    40px -80px #f0f526,
    45px -80px #f0f526,
    65px -80px #f0f526,
    70px -80px #f0f526,
    /*E*/
    80px -45px #f0f526,
    85px -45px #f0f526,
    90px -45px #f0f526,
    95px -45px #f0f526,
    80px -50px #f0f526,
    85px -50px #f0f526,
    90px -50px #f0f526,
    95px -50px #f0f526,
    80px -55px #f0f526,
    85px -55px #f0f526,
    80px -60px #f0f526,
    85px -60px #f0f526,
    90px -60px #f0f526,    
    80px -65px #f0f526,
    85px -65px #f0f526,
    90px -65px #f0f526,
    80px -70px #f0f526,
    85px -70px #f0f526,    
    80px -75px #f0f526,
    85px -75px #f0f526,
    90px -75px #f0f526,
    95px -75px #f0f526,    
    80px -80px #f0f526,
    85px -80px #f0f526,
    90px -80px #f0f526,
    95px -80px #f0f526,
    /*R*/
    105px -45px #f0f526,
    110px -45px #f0f526,
    120px -45px #f0f526,
    125px -45px #f0f526,    
    105px -50px #f0f526,
    110px -50px #f0f526,
    120px -50px #f0f526,
    125px -50px #f0f526,    
    105px -55px #f0f526,
    110px -55px #f0f526,
    115px -55px #f0f526,
    120px -55px #f0f526,    
    105px -60px #f0f526,
    110px -60px #f0f526,
    115px -60px #f0f526,    
    105px -65px #f0f526,
    110px -65px #f0f526,
    115px -65px #f0f526,
    120px -65px #f0f526,    
    105px -70px #f0f526,
    110px -70px #f0f526,
    120px -70px #f0f526,
    125px -70px #f0f526,    
    105px -75px #f0f526,
    110px -75px #f0f526,
    120px -75px #f0f526,
    125px -75px #f0f526,    
    105px -80px #f0f526,
    110px -80px #f0f526,
    115px -80px #f0f526,
    120px -80px #f0f526,
    
    /*R*/
    135px -45px #f0f526,
    140px -45px #f0f526,
    150px -45px #f0f526,
    155px -45px #f0f526,    
    135px -50px #f0f526,
    140px -50px #f0f526,
    150px -50px #f0f526,
    155px -50px #f0f526,    
    135px -55px #f0f526,
    140px -55px #f0f526,
    145px -55px #f0f526,
    150px -55px #f0f526,    
    135px -60px #f0f526,
    140px -60px #f0f526,
    145px -60px #f0f526,    
    135px -65px #f0f526,
    140px -65px #f0f526,
    145px -65px #f0f526,
    150px -65px #f0f526,    
    135px -70px #f0f526,
    140px -70px #f0f526,
    150px -70px #f0f526,
    155px -70px #f0f526,    
    135px -75px #f0f526,
    140px -75px #f0f526,
    150px -75px #f0f526,
    155px -75px #f0f526,    
    135px -80px #f0f526,
    140px -80px #f0f526,
    145px -80px #f0f526,
    150px -80px #f0f526,
    /*Y*/
    175px -45px #f0f526,
    180px -45px #f0f526,
    175px -50px #f0f526,
    180px -50px #f0f526,
    175px -55px #f0f526,
    180px -55px #f0f526,
    175px -60px #f0f526,
    180px -60px #f0f526,
    170px -65px #f0f526,
    175px -65px #f0f526,
    180px -65px #f0f526,
    185px -65px #f0f526,
    170px -70px #f0f526,
    185px -70px #f0f526,
    165px -75px #f0f526,
    170px -75px #f0f526,
    185px -75px #f0f526,
    190px -75px #f0f526,    
    165px -80px #f0f526,
    170px -80px #f0f526,
    185px -80px #f0f526,
    190px -80px #f0f526;
  opacity: 1;
  animation: animateText 3s linear infinite;
}
@keyframes animateText{
  0%{
    opacity: .5
  }
  50%{
    opacity: 1
  }
  100%{
    opacity: .5
  }
}