CSS3 Spider-Man

Spider-Man

HTML



<div id="spiderman">
<div id="spiderman-eyes">
<div id="spiderman-left-eye">
<div id="spiderman-eye-intl"></div>
</div>
<div id="spiderman-right-eye">
<div id="spiderman-eye-intr"></div>
</div>
</div>
<div id="spiderman-web">
<div id="spiderman-web-left">
<div id="spiderman-web-one-l"></div>
<div id="spiderman-web-two-l"></div>
<div id="spiderman-web-three-l"></div>
<div id="spiderman-web-four-l"></div>
<div id="spiderman-web-five-l"></div>
<div id="spiderman-web-six-l"></div>
<div id="spiderman-web-seven-l"></div>
<div id="spiderman-web-eight-l"></div>
</div>
<div id="spiderman-web-right">
<div id="spiderman-web-one-r"></div>
<div id="spiderman-web-two-r"></div>
<div id="spiderman-web-three-r"></div>
<div id="spiderman-web-four-r"></div>
<div id="spiderman-web-five-r"></div>
<div id="spiderman-web-six-r"></div>
<div id="spiderman-web-seven-r"></div>
<div id="spiderman-web-eight-r"></div>
</div>
</div>
<div id="spiderman-head"></div>
<div id="spiderman-neck"></div>
<div id="spiderman-shoulders">
<div id="spiderman-chest">
<div id="spiderman-chest-one"></div>
<div id="spiderman-chest-two"></div>
<div id="spiderman-chest-three"></div>
<div id="spiderman-chest-four"></div>
<div id="spiderman-chest-five"></div>
<div id="spiderman-chest-six"></div>
<div id="spiderman-chest-seven"></div>
<div id="spiderman-chest-eight"></div>
<div id="spiderman-chest-nine"></div>
</div>
</div>
</div>
<div id="spiderman-head-webbing">
<div id="main-section-one">
<div id="spiderman-webbing-one">
<div id="spiderman-web-one"></div>
<div id="spiderman-web-two"></div>
<div id="spiderman-web-three"></div>
<div id="spiderman-web-four"></div>
</div>
<div id="spiderman-webbing-two">
<div id="spiderman-web-five"></div>
<div id="spiderman-web-six"></div>
<div id="spiderman-web-seven"></div>
<div id="spiderman-web-eight"></div>
</div>
</div>
<div id="main-section-two">
<div id="spiderman-webbing-three">
<div id="spiderman-web-nine"></div>
<div id="spiderman-web-ten"></div>
<div id="spiderman-web-eleven"></div>
<div id="spiderman-web-twelve"></div>
</div>
<div id="spiderman-webbing-four">
<div id="spiderman-web-thirteen"></div>
<div id="spiderman-web-fourteen"></div>
<div id="spiderman-web-fifteen"></div>
<div id="spiderman-web-sixteen"></div>
</div>
</div>
<div id="main-section-three">
<div id="spiderman-webbing-five">
<div id="spiderman-web-seventeen"></div>
<div id="spiderman-web-eighteen"></div>
<div id="spiderman-web-nineteen"></div>
<div id="spiderman-web-twenty"></div>
</div>
<div id="spiderman-webbing-six">
<div id="spiderman-web-twentyone"></div>
<div id="spiderman-web-twentytwo"></div>
<div id="spiderman-web-twentythree"></div>
<div id="spiderman-web-twentyfour"></div>
</div>
</div>
<div id="main-section-four">
<div id="spiderman-webbing-seven">
<div id="spiderman-web-twentyfive"></div>
<div id="spiderman-web-twentysix"></div>
<div id="spiderman-web-twentyseven"></div>
<div id="spiderman-web-twentyeight"></div>
</div>
<div id="spiderman-webbing-eight">
<div id="spiderman-web-twentynine"></div>
<div id="spiderman-web-thirty"></div>
<div id="spiderman-web-thirtyone"></div>
<div id="spiderman-web-thirtytwo"></div>
</div>
</div>
<div id="main-section-five">
<div id="spiderman-webbing-nine">
<div id="spiderman-web-thirtythree"></div>
<div id="spiderman-web-thirtyfour"></div>
<div id="spiderman-web-thirtyfive"></div>
<div id="spiderman-web-thirtysix"></div>
</div>
<div id="spiderman-webbing-ten">
<div id="spiderman-web-thirtyseven"></div>
<div id="spiderman-web-thirtyeight"></div>
<div id="spiderman-web-thirtynine"></div>
<div id="spiderman-web-forty"></div>
</div>
</div>
<div id="main-section-six">
<div id="spiderman-webbing-eleven">
<div id="spiderman-web-fortyone"></div>
<div id="spiderman-web-fortytwo"></div>
<div id="spiderman-web-fortythree"></div>
<div id="spiderman-web-fortyfour"></div>
</div>
<div id="spiderman-webbing-twelve">
<div id="spiderman-web-fortyfive"></div>
<div id="spiderman-web-fortysix"></div>
<div id="spiderman-web-fortyseven"></div>
<div id="spiderman-web-fortyeight"></div>
</div>
</div>
<div id="main-section-seven">
<div id="spiderman-webbing-thirteen">
<div id="spiderman-web-fortynine"></div>
<div id="spiderman-web-fifty"></div>
<div id="spiderman-web-fiftyone"></div>
<div id="spiderman-web-fiftytwo"></div>
</div>
<div id="spiderman-webbing-fourteen">
<div id="spiderman-web-fiftythree"></div>
<div id="spiderman-web-fiftyfour"></div>
<div id="spiderman-web-fiftyfive"></div>
<div id="spiderman-web-fiftysix"></div>
</div>
</div>
</div>
<div id="spiderman-body-web-l-frame">
<div id="spiderman-body-web-l">
<div class="spiderman-body-web-l-one"></div>
<div class="spiderman-body-web-l-two"></div>
<div class="spiderman-body-web-l-three"></div>
<div class="spiderman-body-web-l-four"></div>
</div>
<div id="spiderman-body-web-l">
<div class="spiderman-body-web-l-one"></div>
<div class="spiderman-body-web-l-two"></div>
<div class="spiderman-body-web-l-three"></div>
<div class="spiderman-body-web-l-four"></div>
</div>
<div id="spiderman-body-web-l">
<div class="spiderman-body-web-l-one"></div>
<div class="spiderman-body-web-l-two"></div>
<div class="spiderman-body-web-l-three"></div>
<div class="spiderman-body-web-l-four"></div>
</div>
<div id="spiderman-body-web-l">
<div class="spiderman-body-web-l-one"></div>
<div class="spiderman-body-web-l-two"></div>
<div class="spiderman-body-web-l-three"></div>
<div class="spiderman-body-web-l-four"></div>
</div>
</div>
<div id="spiderman-body-web-r-frame">
<div id="spiderman-body-web-r">
<div class="spiderman-body-web-r-one"></div>
<div class="spiderman-body-web-r-two"></div>
<div class="spiderman-body-web-r-three"></div>
<div class="spiderman-body-web-r-four"></div>
</div>
<div id="spiderman-body-web-r">
<div class="spiderman-body-web-r-one"></div>
<div class="spiderman-body-web-r-two"></div>
<div class="spiderman-body-web-r-three"></div>
<div class="spiderman-body-web-r-four"></div>
</div>
<div id="spiderman-body-web-r">
<div class="spiderman-body-web-r-one"></div>
<div class="spiderman-body-web-r-two"></div>
<div class="spiderman-body-web-r-three"></div>
<div class="spiderman-body-web-r-four"></div>
</div>
<div id="spiderman-body-web-r">
<div class="spiderman-body-web-r-one"></div>
<div class="spiderman-body-web-r-two"></div>
<div class="spiderman-body-web-r-three"></div>
<div class="spiderman-body-web-r-four"></div>
</div>
</div>
<div id="spiderman-spider">
<div id="spiderman-spider-head"></div>
<div id="spiderman-spider-body"></div>
<div id="spiderman-spider-limbs"></div>
</div>


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

Inspired by Roman Cortes’ habits & Kris Triplett’s Stormtrooper, bitten by Colorzilla & Border Radius.

All characters are property of their respective trademark holders & used for educational purposes only.

Leave your reply

You must be logged in to post a comment.

Plan Your Project