miércoles, 19 de noviembre de 2014

Pixel Mario Bros con CSS y HTML

Yo creo que ya se dieron cuenta que soy un poco enfermo con Mario Bros y todos los personajes que con el se desarrollan, pero es que este videojuego y personaje es un clásico de los 80's. Y así que no lo podemos dejar pasar así como si nada.

En esta ocasión he encontrado a Mario Bros desarrollado en PixelArt mediante código CSS y HTML.

Puedes revisar el siguiente código en el sitio oficial de CODE PEN

*HTML
---------------------------------------
<div class="mario"></div>
---------------------------------------

*CSS
---------------------------------------
body {
  background: #59ABE3;
}

.mario {
  width: 23px;
  height: 23px;
  margin-top: 5%;
  margin-left: 10%;
  background: transparent;
  box-shadow: 325px 0 0 #F4B350, 350px 0 0 #F4B350, 375px 0 0 #F4B350, 150px 25px 0 #D91E18, 175px 25px 0 #D91E18, 200px 25px 0 #D91E18, 225px 25px 0 #D91E18, 250px 25px 0 #D91E18, 325px 25px 0 #F4B350, 350px 25px 0 #F4B350, 375px 25px 0 #F4B350, 125px 50px 0 #D91E18, 150px 50px 0 #D91E18, 175px 50px 0 #D91E18, 200px 50px 0 #D91E18, 225px 50px 0 #D91E18, 250px 50px 0 #D91E18, 275px 50px 0 #D91E18, 300px 50px 0 #D91E18, 325px 50px 0 #D91E18, 350px 50px 0 #F4B350, 375px 50px 0 #F4B350, 125px 75px 0 #651810, 150px 75px 0 #651810, 175px 75px 0 #651810, 200px 75px 0 #F4B350, 225px 75px 0 #F4B350, 250px 75px 0 #651810, 275px 75px 0 #F4B350, 325px 75px 0 #651810, 350px 75px 0 #651810, 375px 75px 0 #651810, 100px 100px 0 #651810, 125px 100px 0 #F4B350, 150px 100px 0 #651810, 175px 100px 0 #F4B350, 200px 100px 0 #F4B350, 225px 100px 0 #F4B350, 250px 100px 0 #651810, 275px 100px 0 #F4B350, 300px 100px 0 #F4B350, 325px 100px 0 #F4B350, 350px 100px 0 #651810, 375px 100px 0 #651810, 100px 125px 0 #651810, 125px 125px 0 #F4B350, 150px 125px 0 #651810, 175px 125px 0 #651810, 200px 125px 0 #F4B350, 225px 125px 0 #F4B350, 250px 125px 0 #F4B350, 275px 125px 0 #651810, 300px 125px 0 #F4B350, 325px 125px 0 #F4B350, 350px 125px 0 #F4B350, 375px 125px 0 #651810, 100px 150px 0 #651810, 125px 150px 0 #651810, 150px 150px 0 #F4B350, 175px 150px 0 #F4B350, 200px 150px 0 #F4B350, 225px 150px 0 #F4B350, 250px 150px 0 #651810, 275px 150px 0 #651810, 300px 150px 0 #651810, 325px 150px 0 #651810, 350px 150px 0 #651810, 150px 175px 0 #F4B350, 175px 175px 0 #F4B350, 200px 175px 0 #F4B350, 225px 175px 0 #F4B350, 250px 175px 0 #F4B350, 275px 175px 0 #F4B350, 300px 175px 0 #F4B350, 325px 175px 0 #651810, 50px 200px 0 #651810, 75px 200px 0 #651810, 100px 200px 0 #651810, 125px 200px 0 #651810, 150px 200px 0 #651810, 175px 200px 0 #D91E18, 200px 200px 0 #651810, 225px 200px 0 #651810, 250px 200px 0 #651810, 275px 200px 0 #D91E18, 300px 200px 0 #651810, 25px 225px 0 #651810, 50px 225px 0 #651810, 75px 225px 0 #651810, 100px 225px 0 #651810, 125px 225px 0 #651810, 150px 225px 0 #651810, 175px 225px 0 #651810, 200px 225px 0 #D91E18, 225px 225px 0 #651810, 250px 225px 0 #651810, 275px 225px 0 #651810, 300px 225px 0 #D91E18, 375px 225px 0 #651810, 0 250px 0 #F4B350, 25px 250px 0 #F4B350, 50px 250px 0 #651810, 75px 250px 0 #651810, 100px 250px 0 #651810, 125px 250px 0 #651810, 150px 250px 0 #651810, 175px 250px 0 #651810, 200px 250px 0 #D91E18, 225px 250px 0 #D91E18, 250px 250px 0 #D91E18, 275px 250px 0 #D91E18, 300px 250px 0 #D91E18, 375px 250px 0 #651810, 0 275px 0 #F4B350, 25px 275px 0 #F4B350, 50px 275px 0 #F4B350, 125px 275px 0 #D91E18, 150px 275px 0 #651810, 175px 275px 0 #D91E18, 200px 275px 0 #D91E18, 225px 275px 0 #D91E18, 250px 275px 0 #F9BF3B, 275px 275px 0 #D91E18, 300px 275px 0 #F9BF3B, 325px 275px 0 #D91E18, 350px 275px 0 #651810, 375px 275px 0 #651810, 25px 300px 0 #F4B350, 75px 300px 0 #651810, 125px 300px 0 #D91E18, 150px 300px 0 #D91E18, 175px 300px 0 #D91E18, 200px 300px 0 #D91E18, 225px 300px 0 #D91E18, 250px 300px 0 #D91E18, 275px 300px 0 #D91E18, 300px 300px 0 #D91E18, 325px 300px 0 #D91E18, 350px 300px 0 #651810, 375px 300px 0 #651810, 50px 325px 0 #651810, 75px 325px 0 #651810, 100px 325px 0 #651810, 125px 325px 0 #D91E18, 150px 325px 0 #D91E18, 175px 325px 0 #D91E18, 200px 325px 0 #D91E18, 225px 325px 0 #D91E18, 250px 325px 0 #D91E18, 275px 325px 0 #D91E18, 300px 325px 0 #D91E18, 325px 325px 0 #D91E18, 350px 325px 0 #651810, 375px 325px 0 #651810, 25px 350px 0 #651810, 50px 350px 0 #651810, 75px 350px 0 #651810, 100px 350px 0 #D91E18, 125px 350px 0 #D91E18, 150px 350px 0 #D91E18, 175px 350px 0 #D91E18, 200px 350px 0 #D91E18, 225px 350px 0 #D91E18, 250px 350px 0 #D91E18, 25px 375px 0 #651810, 100px 375px 0 #D91E18, 125px 375px 0 #D91E18, 150px 375px 0 #D91E18, 175px 375px 0 #D91E18;

}

---------------------------------------

No hay comentarios:

Publicar un comentario