CSS3 Batman

HTML




<div id="batman">
<div id="batman-ear-l"></div>
<div id="batman-ear-lshading"></div>
<div id="batman-ear-r"></div>
<div id="batman-ear-rshading"></div>
<div id="batman-head">
<div id="batman-forehead"></div>
<div id="batman-eye-box-l">
<div id="batman-eye-ridge-l"></div>
<div id="batman-eye-l">
<div id="batman-sclera-l">
<div class="batman-iris">
<div class="batman-pupil"></div>
</div>
</div>
</div>
</div>
<div id="batman-eye-box-r">
<div id="batman-eye-ridge-r"></div>
<div id="batman-eye-r">
<div id="batman-sclera-r">
<div class="batman-iris"><div class="batman-pupil"></div></div>
</div>
</div>
</div>
<div id="batman-nose-frame">
<div id="batman-bridge-r"></div>
<div id="batman-bridge"></div>
<div id="batman-bridge-l"></div>
<div id="batman-nose-r"></div>
<div id="batman-nose"></div>
<div id="batman-nose-l"></div>
</div>
<div id="batman-cheeks"></div>
<div id="batman-lower-face-outer">
<div id="batman-lower-face">
<div id="batman-mouth"></div>
<div id="batman-mouth-l"></div>
<div id="batman-mouth-r"></div>
</div>
<div id="batman-chin"></div>
</div>
</div>
<div id="batman-neck"></div>
<div id="batman-traps"></div>
<div id="batman-shoulders"></div>
<div id="batman-chest">
<div id="batman-cleavage"></div>
<div id="batman-sign">
<div id="batman-sign-ear-l"></div>
<div id="batman-sign-ear-r"></div>
</div>
</div>
</div>

No jpg, png, psd or ai, no canvas, no jquery & no separate retina/ superpixel support. Pure HTML(5) & CSS(3).

Inspired by Opera & Fail whale, Dark Knight support from Colorzilla & Border Radius.

All characters are property of their respective trademark holders & used for educational purposes only.
Would you like to know more?