A Pen by KingSavate.

index.html

<div id="mario"></div>

Mario-in-pure-CSS.markdown

Mario in pure CSS

Just a Mario done in pure CSS with box-shadow. It is done pixel by pixel, with a declaration of box-shadow for each pixeL; It has to be improved by doing areas of pixels with the spread parameter of box-shadow

A Pen by KingSavate on CodePen.

License.

style.css

/* 
This needs improvments:
It it done pixel by pixel, could be done by areas of pixels
using the fourth parameter, 'spread', of box-shadow
*/

#mario{
  box-shadow:
    0 -3em 0 #d80000,
    -1em -3em 0 #d80000,
    -2em -3em 0 #d80000,
    1em -3em 0 #d80000,
    2em -3em 0 #d80000,
    -3em -2em 0 #d80000,
    -2em -2em 0 #d80000,
    -1em -2em 0 #d80000,
    0 -2em 0 #d80000,
    1em -2em 0 #d80000,
    2em -2em 0 #d80000,
    3em -2em 0 #d80000,
    4em -2em 0 #d80000,
    5em -2em 0 #d80000,
    -3em -1em 0 #706800,
    -2em -1em 0 #706800,
    -1em -1em 0 #706800,
    0 -1em 0 #f8ab00,
    1em -1em 0 #f8ab00,
    2em -1em 0 #706800,
    3em -1em 0 #f8ab00,
    -4em 0 0 #706800,
    -3em 0 0 #f8ab00,
    -2em 0 0 #706800,
    -1em 0 0 #f8ab00,
    0 0 0 #f8ab00,
    1em 0 0 #f8ab00,
    2em 0 0 #706800,
    3em 0 0 #f8ab00,
    4em 0 0 #f8ab00,
    5em 0 0 #f8ab00,
    -4em 1em 0 #706800,
    -3em 1em 0 #f8ab00,
    -2em 1em 0 #706800,
    -1em 1em 0 #706800,
    0 1em 0 #f8ab00,
    1em 1em 0 #f8ab00,
    2em 1em 0 #f8ab00,
    3em 1em 0 #706800,
    4em 1em 0 #f8ab00,
    5em 1em 0 #f8ab00,
    6em 1em 0 #f8ab00,
    -4em 2em 0 #706800,
    -3em 2em 0 #706800,
    -2em 2em 0 #f8ab00,
    -1em 2em 0 #f8ab00,
    0 2em 0 #f8ab00,
    1em 2em 0 #f8ab00,
    2em 2em 0 #706800,
    3em 2em 0 #706800,
    4em 2em 0 #706800,
    5em 2em 0 #706800,
    -2em 3em 0 #f8ab00,
    -1em 3em 0 #f8ab00,
    0 3em 0 #f8ab00,
    1em 3em 0 #f8ab00,
    2em 3em 0 #f8ab00,
    3em 3em 0 #f8ab00,
    4em 3em 0 #f8ab00,
    -3em 4em 0 #706800,
    -2em 4em 0 #706800,
    -1em 4em 0 #d80000,
    0 4em 0 #706800,
    1em 4em 0 #706800,
    2em 4em 0 #706800,
    -4em 5em 0 #706800,
    -3em 5em 0 #706800,
    -2em 5em 0 #706800,
    -1em 5em 0 #d80000,
    0 5em 0 #706800,
    1em 5em 0 #706800,
    2em 5em 0 #d80000,
    3em 5em 0 #706800,
    4em 5em 0 #706800,
    5em 5em 0 #706800,
    -5em 6em 0 #706800,
    -4em 6em 0 #706800,
    -3em 6em 0 #706800,
    -2em 6em 0 #706800,
    -1em 6em 0 #d80000,
    0 6em 0 #d80000,
    1em 6em 0 #d80000,
    2em 6em 0 #d80000,
    3em 6em 0 #706800,
    4em 6em 0 #706800,
    5em 6em 0 #706800,
    6em 6em 0 #706800,
    -5em 7em 0 #f8ab00,
    -4em 7em 0 #f8ab00,
    -3em 7em 0 #706800,
    -2em 7em 0 #d80000,
    -1em 7em 0 #f8ab00,
    0 7em 0 #d80000,
    1em 7em 0 #d80000,
    2em 7em 0 #f8ab00,
    3em 7em 0 #d80000,
    4em 7em 0 #706800,
    5em 7em 0 #f8ab00,
    6em 7em 0 #f8ab00,
    -5em 8em 0 #f8ab00,
    -4em 8em 0 #f8ab00,
    -3em 8em 0 #f8ab00,
    -2em 8em 0 #d80000,
    -1em 8em 0 #d80000,
    0 8em 0 #d80000,
    1em 8em 0 #d80000,
    2em 8em 0 #d80000,
    3em 8em 0 #d80000,
    4em 8em 0 #f8ab00,
    5em 8em 0 #f8ab00,
    6em 8em 0 #f8ab00,
    -5em 9em 0 #f8ab00,
    -4em 9em 0 #f8ab00,
    -3em 9em 0 #d80000,
    -2em 9em 0 #d80000,
    -1em 9em 0 #d80000,
    0 9em 0 #d80000,
    1em 9em 0 #d80000,
    2em 9em 0 #d80000,
    3em 9em 0 #d80000,
    4em 9em 0 #d80000,
    5em 9em 0 #f8ab00,
    6em 9em 0 #f8ab00,
    -3em 10em 0 #d80000,
    -2em 10em 0 #d80000,
    -1em 10em 0 #d80000,
    2em 10em 0 #d80000,
    3em 10em 0 #d80000,
    4em 10em 0 #d80000,
    -4em 11em 0 #706800,
    -3em 11em 0 #706800,
    -2em 11em 0 #706800,
    3em 11em 0 #706800,
    4em 11em 0 #706800,
    5em 11em 0 #706800,
    -5em 12em 0 #706800,
    -4em 12em 0 #706800,
    -3em 12em 0 #706800,
    -2em 12em 0 #706800,
    3em 12em 0 #706800,
    4em 12em 0 #706800,
    5em 12em 0 #706800,
    6em 12em 0 #706800;
  
    background: #f8ab00;
    width: 1em;
    height: 1em;
    margin: 50px 0 70px 75px;
  }