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.
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!
Thanks Ivan,
There is a small CSS3 boat here at the moment: http://enrappture.com/about/ to use.