S
All characters are property of their respective trademark holders & used for educational purposes only.
Monthly Archives: June 2012
CSS Hulk
HTML
<div id="hulk"> <div id="hulk-head"> <div id="hulk-hair"> <div class="hulk-hair-strand-one"></div> <div class="hulk-hair-strand-two"></div> <div class="hulk-hair-strand-three"></div> <div class="hulk-hair-strand-four"></div> </div> <div id="hulk-forehead"></div> <div id="hulk-face"></div> <div id="hulk-brow-l"></div> <div id="hulk-brow-r"></div> <div id="hulk-eye-r"> <div class="hulk-pupil"></div> </div> <div id="hulk-eye-l"> <div class="hulk-pupil"></div> </div> <div id="hulk-faceplate"> <div id="hulk-bridge-l"></div> <div id="hulk-nose-bridge"></div> <div id="hulk-nose-bridge-center"> <div id="hulk-nose-wrinkle-l"></div> <div id="hulk-nose-wrinkle-r"></div> </div> <div id="hulk-bridge-r"></div> <div class="clear"></div> </div> <div id="hulk-cheek-l"></div> <div id="hulk-cheek-r"></div> <div id="hulk-mouth"> <div id="hulk-teeth-top"></div> <div id="hulk-teeth-bottom"></div> </div> </div> <div class="hulk-ears"></div> <div class="hulk-meat"></div> <div id="hulk-neck"></div> <div id="hulk-chest"> <div id="hulk-arm-l"></div> <div id="hulk-cleavage"></div> <div id="hulk-arm-r"></div> <div class="clear"></div> </div> </div>View CSS →
No jpg, png, psd or ai, no canvas, no jquery & no separate retina/ superpixel support. Pure HTML(5) & CSS(3).
Inspired by Las Meninas de Roman Cortes & Paul Irish, Hulk smash with Colorzilla & Border Radius.
All characters are property of their respective trademark holders & used for educational purposes only.
CSS 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>View CSS →
No jpg, png, psd or ai, no canvas, no jquery & no separate retina/ superpixel support. Pure HTML(5) & CSS(3).
Inspired by CSS Play, Zen, armed by Colorzilla & Border Radius.
All characters are property of their respective trademark holders & used for educational purposes only.
CSS Wolverine
HTML
<div id="wolverine"> <div id="wolverine-head-box"> <div id="wolverine-nosecover"></div> <div id="wolverine-top"> <div id="wolverine-ear-l"></div> <div id="wolverine-eye-l"></div> <div id="wolverine-ear-r"></div> <div id="wolverine-eye-r"></div> </div> </div> <div id="wolverine-head"> <div id="wolverine-nose"></div> <div id="wolverine-face"> <div id="wolverine-mouth"> <div id="wolverine-mouthin"> <div id="wolverine-top-teeth"></div> <div id="wolverine-bottom-teeth"></div> </div> </div> </div> <div id="wolverine-chin"></div> </div> <div id="wolverine-neck"></div> <div id="wolverine-shoulders"></div> <div id="wolverine-hand-l"> <div class="wolverine-claw-l"></div> <div class="wolverine-claw-l"></div> <div class="wolverine-claw-l"></div> <div class="wolverine-claw-l"></div> </div> <div id="wolverine-hand-r"> <div class="wolverine-claw-r"></div> <div class="wolverine-claw-r"></div> <div class="wolverine-claw-r"></div> <div class="wolverine-claw-r"></div> </div> <div id="wolverine-sideburns"> <div id="wolverine-sideburn-l"></div> <div id="wolverine-sideburn-r"></div> </div> </div>View CSS →
No jpg, png, psd or ai, no canvas, no jquery & no separate retina/ superpixel support. Pure HTML(5) & CSS(3).
Inspired by Webkit, Fail whale, slashed together with Colorzilla & Border Radius.
All characters are property of their respective trademark holders & used for educational purposes only.
CSS 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>View CSS →
No jpg, png, psd or ai, no canvas, no jquery & no separate retina/ superpixel support. Pure HTML(5) & CSS(3).
Inspired by CSS Play, Zen, armed by Colorzilla & Border Radius.
All characters are property of their respective trademark holders & used for educational purposes only.
CSS 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>View CSS →
No jpg, png, psd or ai, no canvas, no jquery & no separate retina/ superpixel support. Pure HTML(5) & CSS(3).
Inspired by Webkit, Fail whale, slashed together with Colorzilla & Border Radius.
All characters are property of their respective trademark holders & used for educational purposes only.
CSS Iron Man
HTML
<div id="ironman"> <div id="ironman-head"> <div id="ironman-headin"> <div id="ironman-hair"></div> <div id="ironman-forehead"></div> <div id="ironman-cheek-r"></div> <div id="ironman-cheek-l"></div> <div id="ironman-eye-r"></div> <div id="ironman-eye-l"></div> <div id="ironman-lower-face"></div> <div id="ironman-center-face"></div> <div id="ironman-jaw"> <div id="ironman-mouth-l-end"></div> <div id="ironman-mouth-l"></div> <div id="ironman-mouth"></div> <div id="ironman-mouth-r-end"></div> <div id="ironman-mouth-r"></div> <div id="ironman-bottom-face"></div> <div id="ironman-chin"></div> </div> </div> </div> <div id="ironman-neck"></div> <div id="ironman-shoulders"></div> <div id="ironman-chest"></div> </div>View CSS →
No jpg, png, psd or ai, no canvas, no jquery & no separate retina/ superpixel support. Pure HTML(5) & CSS(3).
Inspired by CSS Play, Zen, armed by Colorzilla & Border Radius.
All characters are property of their respective trademark holders & used for educational purposes only.
CSS3 StumbleUpon
CSS vs png
Details
The logo on the left (top on a mobile) is made from pure HTML & CSS. The right (bottom) is a png.
CSS Technology
Technology
A series of 4 predictive, responsive HTML & CSS digital posters to mark time. As time progresses, Liberty, Technology, Censorship & Freedom will become predominant themes of the Internet.
CSS Censorship
Censorship
A series of 4 predictive, responsive HTML & CSS digital posters to mark time. As time progresses, Liberty, Technology, Censorship & Freedom will become predominant themes of the Internet.