<div class='wrapper'>
<div class='megaman'/>
<p><strong>CSS3 Pixel Art Megaman 8-bit</strong>
  <br/>Recreation of: <a href="http://thecoolship.com/wp-content/uploads/2013/03/Mega-Man-Sprite.gif">http://thecoolship.com/wp-content/uploads/2013/03/Mega-Man-Sprite.gif<a/></p>
  </div>
@import "compass/css3";

$black: #000;
$white: #fff;
$blue: rgb(1,113,239);
$lb: rgb(57,190,255);
$tan: rgb(255,231,165);

.wrapper{
  position: relative;
  top: 2em;
}
.megaman{
  position: relative;
  top: -30px;
  left: -30px;
  margin: 0px;
  padding: 0px;
	display: block;
	width: 20px;
	height: 20px;
	box-shadow: 
    380px 20px $black,
    400px 20px $black,
    420px 20px $black,
    340px 40px $black,
    360px 40px $black,
    380px 40px $black,
    400px 40px $lb,
    420px 40px $lb,
    440px 40px $black,
    460px 60px $black,
    440px 60px $lb,
    420px 60px $lb,
    400px 60px $black,
    380px 60px $blue,
    360px 60px $blue,
    340px 60px $blue,
    320px 60px $black,
    300px 80px $black,
    320px 80px $blue,
    340px 80px $blue,
    360px 80px $blue,
    380px 80px $blue,
    400px 80px $blue,
    420px 80px $black,
    440px 80px $black,
    460px 80px $black,
    480px 80px $black,
    300px 100px $black,
    320px 100px $blue,
    340px 100px $blue,
    360px 100px $blue,
    380px 100px $blue,
    400px 100px $blue,
    420px 100px $black,
    440px 100px $lb,
    460px 100px $lb,
    480px 100px $blue,
    500px 100px $black,
    280px 120px $black,
    300px 120px $lb,
    320px 120px $blue,
    340px 120px $blue,
    360px 120px $blue,
    380px 120px $blue,
    400px 120px $blue,
    420px 120px $blue,
    440px 120px $black,
    460px 120px $black,
    480px 120px $blue,
    500px 120px $black,
    240px 140px $black,
    260px 140px $black,
    280px 140px $black,
    300px 140px $lb,
    320px 140px $blue,
    340px 140px $blue,
    360px 140px $tan,
    380px 140px $white,
    400px 140px $white,
    420px 140px $white,
    440px 140px $blue,
    460px 140px $blue,
    480px 140px $white,
    500px 140px $black,
    200px 160px $black,
    220px 160px $black,
    240px 160px $lb,
    260px 160px $lb,
    280px 160px $black,
    300px 160px $lb,
    320px 160px $blue,
    340px 160px $tan,
    360px 160px $white,
    380px 160px $white,
    400px 160px $black,
    420px 160px $black,
    440px 160px $tan,
    460px 160px $black,
    480px 160px $white,
    500px 160px $black,
    180px 180px $black,
    200px 180px $lb,
    220px 180px $lb,
    240px 180px $lb,
    260px 180px $lb,
    280px 180px $lb,
    300px 180px $black,
    320px 180px $blue,
    340px 180px $tan,
    360px 180px $white,
    380px 180px $white,
    400px 180px $black,
    420px 180px $black,
    440px 180px $tan,
    460px 180px $black,
    480px 180px $white,
    500px 180px $black,
    580px 180px $black,
    600px 180px $black,
    620px 180px $black,
    640px 180px $black,
    160px 200px $black,
    180px 200px $blue,
    200px 200px $lb,
    220px 200px $lb,
    240px 200px $lb,
    260px 200px $lb,
    280px 200px $lb,
    300px 200px $black,
    320px 200px $blue,
    340px 200px $tan,
    360px 200px $tan,
    380px 200px $white,
    400px 200px $white,
    420px 200px $white,
    440px 200px $tan,
    460px 200px $white,
    480px 200px $tan,
    500px 200px $black,
    520px 200px $black,
    540px 200px $black,
    560px 200px $black,
    580px 200px $blue,
    600px 200px $blue,
    620px 200px $blue,
    640px 200px $black,
    660px 200px $black,
    680px 200px $black,
    160px 220px $black,
    180px 220px $blue,
    200px 220px $blue,
    220px 220px $blue,
    240px 220px $lb,
    260px 220px $black,
    280px 220px $lb,
    300px 220px $lb,
    320px 220px $black,
    340px 220px $blue,
    360px 220px $tan,
    380px 220px $black,
    400px 220px $black,
    420px 220px $black,
    440px 220px $black,
    460px 220px $tan,
    480px 220px $black,
    500px 220px $black,
    520px 220px $lb,
    540px 220px $lb,
    560px 220px $black,
    580px 220px $blue,
    600px 220px $lb,
    620px 220px $lb,
    640px 220px $lb,
    660px 220px $black,
    680px 220px $lb,
    700px 220px $black,
    160px 240px $black,
    180px 240px $blue,
    200px 240px $blue,
    220px 240px $blue,
    240px 240px $black,
    260px 240px $blue,
    280px 240px $black,
    300px 240px $lb,
    320px 240px $lb,
    340px 240px $black,
    360px 240px $tan,
    380px 240px $tan,
    400px 240px $tan,
    420px 240px $tan,
    440px 240px $tan,
    460px 240px $black,
    480px 240px $lb,
    500px 240px $lb,
    520px 240px $lb,
    540px 240px $lb,
    560px 240px $black,
    580px 240px $blue,
    600px 240px $blue,
    620px 240px $blue,
    640px 240px $blue,
    660px 240px $black,
    680px 240px $blue,
    700px 240px $black,
    180px 260px $black,
    200px 260px $blue,
    220px 260px $blue,
    240px 260px $black,
    260px 260px $blue,
    280px 260px $blue,
    300px 260px $black,
    320px 260px $lb,
    340px 260px $lb,
    360px 260px $black,
    380px 260px $black,
    400px 260px $black,
    420px 260px $black,
    440px 260px $black,
    460px 260px $lb,
    480px 260px $lb,
    500px 260px $lb,
    520px 260px $lb,
    540px 260px $lb,
    560px 260px $black,
    580px 260px $blue,
    600px 260px $blue,
    620px 260px $blue,
    640px 260px $black,
    660px 260px $black,
    680px 260px $black,
    200px 280px $black,
    220px 280px $blue,
    240px 280px $blue,
    260px 280px $blue,
    280px 280px $blue,
    300px 280px $black,
    320px 280px $lb,
    340px 280px $lb,
    360px 280px $lb,
    380px 280px $lb,
    400px 280px $lb,
    420px 280px $lb,
    440px 280px $lb,
    460px 280px $black,
    480px 280px $black,
    500px 280px $black,
    520px 280px $black,
    540px 280px $black,
    560px 280px $white,
    580px 280px $black,
    600px 280px $black,
    620px 280px $black,
    640px 280px $black,
    220px 300px $black,
    240px 300px $blue,
    260px 300px $blue,
    280px 300px $black,
    300px 300px $lb,
    320px 300px $lb,
    340px 300px $lb,
    360px 300px $lb,
    380px 300px $lb,
    400px 300px $lb,
    420px 300px $lb,
    440px 300px $black,
    240px 320px $black,
    260px 320px $black,
    280px 320px $blue,
    300px 320px $blue,
    320px 320px $lb,
    340px 320px $lb,
    360px 320px $lb,
    380px 320px $lb,
    400px 320px $lb,
    420px 320px $lb,
    440px 320px $black,
    260px 340px $black,
    280px 340px $blue,
    300px 340px $blue,
    320px 340px $blue,
    340px 340px $blue,
    360px 340px $blue,
    380px 340px $blue,
    400px 340px $blue,
    420px 340px $blue,
    440px 340px $black,
    240px 360px $black,
    260px 360px $lb,
    280px 360px $blue,
    300px 360px $blue,
    320px 360px $blue,
    340px 360px $blue,
    360px 360px $blue,
    380px 360px $blue,
    400px 360px $blue,
    420px 360px $lb,
    440px 360px $black,
    220px 380px $black,
    240px 380px $lb,
    260px 380px $lb,
    280px 380px $lb,
    300px 380px $blue,
    320px 380px $blue,
    340px 380px $blue,
    360px 380px $blue,
    380px 380px $blue,
    400px 380px $lb,
    420px 380px $lb,
    440px 380px $lb,
    460px 380px $black,
    200px 400px $black,
    220px 400px $blue,
    240px 400px $lb,
    260px 400px $lb,
    280px 400px $lb,
    300px 400px $lb,
    320px 400px $black,
    340px 400px $black,
    360px 400px $lb,
    380px 400px $lb,
    400px 400px $lb,
    420px 400px $lb,
    440px 400px $blue,
    460px 400px $blue,
    480px 400px $black,
    160px 420px $black,
    180px 420px $black,
    200px 420px $blue,
    220px 420px $blue,
    240px 420px $blue,
    260px 420px $lb,
    280px 420px $lb,
    300px 420px $black,
    320px 420px $white,
    340px 420px $white,
    360px 420px $black,
    380px 420px $blue,
    400px 420px $blue,
    420px 420px $blue,
    440px 420px $blue,
    460px 420px $blue,
    480px 420px $black,
    120px 440px $black,
    140px 440px $black,
    160px 440px $blue,
    180px 440px $blue,
    200px 440px $blue,
    220px 440px $blue,
    240px 440px $blue,
    260px 440px $blue,
    280px 440px $black,
    300px 440px $white,
    320px 440px $white,
    340px 440px $white,
    360px 440px $black,
    380px 440px $blue,
    400px 440px $blue,
    420px 440px $blue,
    440px 440px $blue,
    460px 440px $black,
    480px 440px $black,
    500px 440px $black,
    100px 460px $black,
    120px 460px $blue,
    140px 460px $blue,
    160px 460px $blue,
    180px 460px $blue,
    200px 460px $blue,
    220px 460px $blue,
    240px 460px $blue,
    260px 460px $black,
    280px 460px $white,
    300px 460px $white,
    320px 460px $white,
    340px 460px $black,
    360px 460px $blue,
    380px 460px $blue,
    400px 460px $blue,
    420px 460px $blue,
    440px 460px $blue,
    460px 460px $blue,
    480px 460px $blue,
    500px 460px $blue,
    520px 460px $black,
    100px 480px $black,
    120px 480px $black,
    140px 480px $black,
    160px 480px $black,
    180px 480px $black,
    200px 480px $black,
    220px 480px $black,
    240px 480px $black,
    260px 480px $black,
    280px 480px $white,
    300px 480px $white,
    320px 480px $white,
    340px 480px $black,
    360px 480px $black,
    380px 480px $black,
    400px 480px $black,
    420px 480px $black,
    440px 480px $black,
    460px 480px $black,
    480px 480px $black,
    500px 480px $black,
    520px 480px $black,
    400px 20px $black
    ;
}

p{
  position: absolute;
  width: 600px;
  left: 100px;
  top: 500px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js