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.
<div id="mario"></div> |
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.
/* | |
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; | |
} |