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.

2 Responses to CSS3 Batman

What's Yours?

  1. Ivan says:

    I was having a task about creating simple boat by CSS3. The boat was nothing compared to this as I see the code. Good luck! Your ideas are pretty cool!

Leave your reply

Would you like to know more?