CSS3 Superman

S
S

HTML



<div id="superman">
<div id="superman-laser">
<div id="superman-laser-l"></div>
<div id="superman-laser-r"></div>
</div>
<div id="superman-ears">
<div id="superman-earin"></div>
</div>
<div id="superman-head">
<div id="superman-hair">
<div id="superman-parting"></div>
</div>
<div id="superman-hair-l"></div>
<div id="superman-hair-r"></div>
<div id="superman-forehead"></div>
<div id="superman-quiff">S</div>
<div id="superman-face">
<div id="superman-brows">
<div id="superman-brow-l-out"></div>
<div id="superman-brow-l-in"></div>
<div id="superman-brow-r-out"></div>
<div id="superman-brow-r-in"></div>
<div id="clear"></div>
</div>
<div id="superman-eye-r">
<div class="superman-iris">
<div class="superman-pupil"></div>
</div>
</div>
<div id="superman-eye-l">
<div class="superman-iris">
<div class="superman-pupil"></div>
</div>
</div>
</div>
<div id="clear"></div>
<div id="superman-bridge"></div>
<div id="clear"></div>
<div id="superman-jaw"></div>
<div id="superman-nose"></div>
<div id="superman-mouth">
<div id="superman-lips-left"></div>
<div id="superman-lips-center"></div>
<div id="superman-lips-right"></div>
</div>
<div id="superman-chin">
<div id="superman-chin-cleft-l"></div>
<div id="superman-chin-cleft-r"></div>
</div>
</div>
<div id="superman-neck"></div>
<div id="superman-cape"></div>
<div id="superman-shoulders">
<div id="superman-pecks-l"></div>
<div id="superman-pecks"></div>
<div id="superman-pecks-r"></div>
<div id="superman-shield-out"></div>
<div id="superman-shield"></div>
<div id="superman-shield-symbol">S</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 Kris Triplett’s Vader & Shapes of CSS Tricks, is it a bird? is it a plane? no it’s… Colorzilla & Border Radius.
All characters are property of their respective trademark holders & used for educational purposes only.
Connect with us on Fb, SU, RSS, Twit, Git or Dribbble.

Leave your reply

You must be logged in to post a comment.

Plan Your Project